0

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

Solution : Refer : Access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response

Thanks for your help in advance.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Mudassir Khan
  • 318
  • 1
  • 11
  • 1
    Are you using Chrome? If so, see this - https://stackoverflow.com/questions/10883211/deadly-cors-when-http-localhost-is-the-origin – Joseph Lane Jul 06 '20 at 08:15
  • Yes. I'm using Chrome. But I have checked the same in Firefox. I get the similar issue. "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at . (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)." – Mudassir Khan Jul 06 '20 at 08:21
  • @JosephLane Thanks for the Firefox advice. I figured out the problem. Its the problem in the authorization string. – Mudassir Khan Jul 06 '20 at 13:00

1 Answers1

1

There are a few things to look at here.

  1. Make sure that all resposnes from within your Lambda function are returning cors headers. I see that is the case in your example.
  2. Make sure that the function itself is not returning an error. You can see this in the Serverless Framework dashboard if you are using that or CloudWatch. If so, you need to find a fix or catch the error and make sure the response also includes the required CORS headers
  3. Otherwise, if your Authorization is returning a 403, for example, you will need to configure the responses for API Gateways 4XX responses in the resources section of your serverless.yml, since API Gateway by default does not apply cors to authorizer responses. Something like:
resources:
  Resources:
    GatewayResponseDefault4XX:
      Type: 'AWS::ApiGateway::GatewayResponse'
      Properties:
        ResponseParameters:
          gatewayresponse.header.Access-Control-Allow-Origin: "'*'"
          gatewayresponse.header.Access-Control-Allow-Headers: "'*'"
        ResponseType: DEFAULT_4XX
        RestApiId:
          Ref: 'ApiGatewayRestApi'
Gareth McCumskey
  • 1,510
  • 7
  • 12
  • The API is working. As I'm using the Postman to check its responses as well. – Mudassir Khan Jul 06 '20 at 10:27
  • 1
    When using it in your browser, check the response status code – Gareth McCumskey Jul 06 '20 at 12:40
  • Thanks @Gareth. I found the issue. It was problem in the authorization key generation due to which I was getting 403 status error. Also the error was only visible in Firefox not in Chrome. I will update the changes in repo and share the same in my answer. – Mudassir Khan Jul 06 '20 at 12:59