CODEWITHSUNDEEP
angularaws-lambdacorsaws-api-gatewayaws-amplify
lumberjacked
lumberjacked

Reputation: 976

Amplify with Rest API Gateway lambda integration CORS issues

Using amplify I setup a express serverless lambda. I add the headers that seem to be around on the internet. Only recently did I add the stars because I'm so frustrated with this.

my lambda headers

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Credentials", true),
  res.header("Access-Control-Allow-Methods", "*")
  res.header("Access-Control-Allow-Headers", "*")
  
  next()
});

I create the rest gateway through amplify also add a path and select "authenticated users only", and push the gateway. I dont know if its necessary but I also go to the route inside the gateway and "Enable Cors" and "Deploy Gateway". I do this every time after adding a new route. I have logging turned on for the gateway and it seems to be responding with the correct headers but on the lambda side it never gets triggered through the gateway from the cloud using amplify hosted stack.

(878907ef-3f7c-4970-a336-227af689ada0) Method response headers: {Access-Control-Allow-Headers=Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token, Access-Control-Allow-Methods=DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT, Access-Control-Allow-Origin=*, Content-Type=application/json}

Locally on my angular app (http://localhost:4200) if I configure the main.ts file (as below) results in a Cors issue. But from the gateway if I run the test method I get the correct response back. (I know other errors show up as Cors issues but here isn't the case)

import API from '@aws-amplify/api';
import Auth from '@aws-amplify/auth';
API.configure(awsconfig);
Auth.configure(awsconfig);

If I configure the angular main.ts file locally (http://localhost:4200) with (as below) results in successful responses from the lambda. Without any Cors errors at all.

import { Amplify } from 'aws-amplify';
Amplify.configure(awsconfig);

But the problem comes in again when I try and push the amplify app to the amplify hosted cloud stack. If I use the below configuration then the app in the console tells me "TypeError: Cannot read property 'aws_appsync_region' of null" and never bootstraps.

TypeError: Cannot read property 'aws_appsync_region' of null
    at t._graphqlSubscribe (main-es2015.9d63c1e97711d41894ae.js:1)
    at t.graphql (main-es2015.9d63c1e97711d41894ae.js:1)
    at t.graphql (main-es2015.9d63c1e97711d41894ae.js:1)
    at new t (main-es2015.9d63c1e97711d41894ae.js:1)
    at Object.t.ɵfac [as factory] (main-es2015.9d63c1e97711d41894ae.js:1)
    at ks.hydrate (main-es2015.9d63c1e97711d41894ae.js:1)
    at ks.get (main-es2015.9d63c1e97711d41894ae.js:1)
    at tt (main-es2015.9d63c1e97711d41894ae.js:1)
    at Object.et (main-es2015.9d63c1e97711d41894ae.js:1)
    at Object.t.ɵfac [as factory] (main-es2015.9d63c1e97711d41894ae.js:1)

import { Amplify } from 'aws-amplify';
Amplify.configure(awsconfig);

But if I add back in the configuration it removes the above error message with 'aws_appsync_region' but goes right back to having a Cors issue to the lambda.

import API from '@aws-amplify/api';
import Auth from '@aws-amplify/auth';
import { Amplify } from 'aws-amplify';
Amplify.configure(awsconfig);
API.configure(awsconfig);
Auth.configure(awsconfig);

In the console it shows.

Access to XMLHttpRequest at 'https://XXXXXXXXXX.execute-api.us-east-1.amazonaws.com/sandbox/blind/get' 
from origin 'https://sandbox.whatever.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is 
present on the requested resource.
main-es2015.dc59a351503c7e4f109f.js:1 ERROR Error: Network Error
    at LYNF.t.exports (main-es2015.dc59a351503c7e4f109f.js:1)
    at XMLHttpRequest.d.onerror [as __zone_symbol__ON_PROPERTYerror] (main-es2015.dc59a351503c7e4f109f.js:1)
    at XMLHttpRequest.T (polyfills-es2015.026fcb2559269e9f129a.js:1)
    at l.invokeTask (polyfills-es2015.026fcb2559269e9f129a.js:1)
    
VM279:1 POST https://XXXXXXXXXX.execute-api.us-east-1.amazonaws.com/sandbox/blind/get net::ERR_FAILED

All I want is these stupid Cors errors to go away and be able to push my app out to the cloud under the stack it belongs. I have deleted all the other stacks because none of them have been working. This seems ridiculous to be fighting amplify, api gateway, and lambda over these errors. Anyone please explain to me where the problem is and how I can get it fixed. I feel like I have read all related and unrelated articles and made it halfway there, only to find I can't deploy the app.

Upvotes: 0

Views: 3267

Answers (1)

lumberjacked
lumberjacked

Reputation: 976

For others running into the same issue. Sometimes its not a real CORS issue (which I knew) but didnt know how to debug it. Per AWS there is a known bug in amplify auth version 3.4.4.

First recommended step is to change the way amplify configures the services. This alone did not fix the problem and I haven't tested it the other way around.

import API from '@aws-amplify/api';
import Auth from '@aws-amplify/auth';
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);
Amplify.register(Auth);
Amplify.register(API);

Next (for angular) change inside the environment configuration buildOptimizer to false.

"buildOptimizer": false,

After these steps I was able to push the code to the cloud and login as expected. The same as my local system. If the above steps do not work the other recommended step is to downgrade Amplify Auth to 3.3.2.

"@aws-amplify/auth": "3.3.2"

Upvotes: 1

Related Questions