1

I have prepared an Lambda function using Express(node.js) and enabled the Authorization with IAM as well.

The API is working in the Postman as per below link : https://www.youtube.com/watch?v=KXyATZctkmQ&t=35s

As I'm fairly new with CORS policy and API concepts. I'm trying to access the sample using Ajax call.

So far I have prepared the Authorization Header as per documentation and few reference.

Git Repo Link : https://github.com/mudass1r/aws-iam-authorization.git

Reference Link for Signature Generation : https://gist.github.com/davidkelley/c1274cffdc0d9d782d7e

I have Enabled the CORS from AWS API Gateway for my API as well.

enter image description here

enter image description here PS : The API is Deployed using Serverless Framework.

Step 1 : The error I'm facing initial when I dont include any headers: enter image description here

Step 2 : Later when I add headers:

$.ajax(Signer(credentials, {
  url: <AWS API URL>,
  type: 'GET',
  dataType: 'json',
  async: true,
  crossDomain: true,
  contentType: 'application/json',
  headers: {
    "Access-Control-Allow-Origin" : "*"
  },
  success: function(data) {
    console.log(data);
  }
}));

After which I get the following error: enter image description here

In my previous experience with this error we only need to enable the CORS for the API which resolves this issue. But the same is not in this cases. Following is the structure of the API resource.

enter image description here

I have been stuck in this problem for few day and came across some CORS policy reference links as well. https://fetch.spec.whatwg.org/#http-cors-protocol

Thanks everyone for your inputs and help.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Mudassir Khan
  • 318
  • 1
  • 11
  • 2
    The entire `headers` block needs to be removed from the `$.ajax` call shown in the question. If after that’s removed, you’re still getting an error, then you should either use https://stackoverflow.com/posts/62749340/edit to edit/update the question and cite the new error — or else create a separate new question about that. – sideshowbarker Jul 06 '20 at 06:04
  • @sideshowbarker Thanks for your advice. Also I had mentioned the issues I was facing without and without headers in ajax. I have update the question to highlight those parts. Appreciate your inputs. – Mudassir Khan Jul 06 '20 at 06:41
  • 1
    Is the server at the `` CORS-enabled? If so, can you please also update the question to show the CORS configuration for that `` server? – sideshowbarker Jul 06 '20 at 07:30
  • @sideshowbarker I had the CORS configuration snippets – Mudassir Khan Jul 06 '20 at 07:49
  • 2
    When you get that CORS error, what’s the HTTP status code of the response? You can use the Network pane in browser devtools to check. If Chrome doesn’t show it to you, use the Network pane in Firefox devtools. Is it a 4xx or 5xx error rather than a 200 OK success response? – sideshowbarker Jul 06 '20 at 08:46
  • Thanks @sideshowbarker I figured out the problem. First of all the headers were correct as you advice. The problem was in the authorization string which was sent along with the header. I was able to view this in the Firefox as the Chrome didn't showed this error in Network. I will share my findings in my answer. Thanks again for your help and to nudge me in the correct direction !! Its been a great learning experience – Mudassir Khan Jul 06 '20 at 13:04

1 Answers1

1

Answer :

First of all the problem was not in header content. It was in the Authorization String which I was generating for AWS API Gateway authorization.

As pointed by @sideshowbarker. We don't need to add any headers in the ajax call.

The response header are enough to handle the API call.

app.use(cors())

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method,X-Access-Token,XKey,Authorization');
    next();
});

Also I switched to Firefox for debugging the API call, where I found following errors. enter image description here

enter image description here

Because I switched to Firefox, I could see the response from AWS from which I could further debug and fix the issue.

enter image description here

Issue in the CanonicalRequest function :

Before

'content-type;host;x-amz-date;'

After

'content-type;host;x-amz-date'

Thanks everyone for your inputs and help.

I have updated the git repo. Please refer the same. https://github.com/mudass1r/aws-iam-authorization

Mudassir Khan
  • 318
  • 1
  • 11