CORS AWS API-Gateway with Authentication Angular2

Question

my AWS API-Gateway is configured as Lambda Proxy. In Lambda i added the following Headers:

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': '*',
'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key'

First, everythink works fine with it. Now i added an Authorizer with CognitoUserPool and i get the following Error:

XMLHttpRequest cannot load https://xxx.eu-west-1.amazonaws.com/xxx/xxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 401.

I think the problem is, that with Authentication my Lambdafunction is not invoked and so no Headers were set. I call the Endpoint from an Angular2 Application with

const headers = new Headers();
headers.append('Authorization', 'authtoken');
http.get('address...', headers);

But the headers were not set/append to the request because of any CORS-reasons i think.

Anyone an idea how can i solve this?

P.S.: I tried the "Enable Cors" feature of API-Gateway but that does not work.

Edit: I also have a "OPTIONS" Method in Gateway with Authentication, that responds with the Headers above.

Greetings

I know it's trivial but I have to ask: Did you deploy your API after enabling CORS to reflect those changes? — Khalid T.
– Khalid T., Commented Apr 27, 2017 at 11:07

David Kelley · Accepted Answer · 2017-04-27 14:34:09Z

1

Is your Lambda Proxy function mapping to the ANY HTTP method type? If so, it may be attempting to perform authentication on the pre-flight (OPTIONS) request. If this is the case, try mapping your proxy function to POST, GET, etc. specifically.

answered Apr 27, 2017 at 14:34

David Kelley

2032 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Flash91 Over a year ago

No, it is specially mapped to every Function. Not with the Any-Method.

Flash91 · Accepted Answer · 2017-05-05 10:16:23Z

0

I found the solution of the problem. It was not caused by API-Gateway. Problem was this code:

const headers = new Headers();
headers.append('Authorization', 'authtoken');
http.get('address...', headers);

The "get" needs a "RequestOptions"-object. It has to be:

const headers = new Headers();
headers.append('Authorization', 'authtoken');
const options = new RequestOptions({headers: headers});
http.get('address...', options);

answered May 5, 2017 at 10:16

Flash91

1681 gold badge1 silver badge12 bronze badges

Collectives™ on Stack Overflow

CORS AWS API-Gateway with Authentication Angular2

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related