Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CORS error when calling function in browser #4037

Closed
choychris opened this issue Aug 4, 2017 · 7 comments

Comments

Projects
None yet
6 participants
@choychris
Copy link

commented Aug 4, 2017

Hi all,

I have been digging for many hours on the internet, reading all the issue comments and try the solution at :
#1955
However, when I try to call the serverless function in browser I still get the below error
(the serverless function can be invokes correctly through serverless invoke cli)

Fetch API cannot load (...Lambda url ). No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3001' is therefore not allowed access. The response had HTTP status code 502. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I am using fetch API in frontend with the following headers :

    let myHeader = new Headers();
    myHeader.append('Accept', 'application/json');
    myHeader.append('Content-Type', 'application/json');

even if I add
myHeader.append('Access-Control-Allow-Origin', '*');
it shows another error:
Fetch API cannot load (...Lambda url ). Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

my serverless.yml has the following config:

    events:
      - http: 
          path: cloudvision
          method: post
          cors: true

my hander callback response:

        callback(null, { 
            statusCode : 200,
            headers: {
              "Access-Control-Allow-Origin" : "*"
            },
            body : JSON.stringify(textResult)
          });

also, I used postman to test it, it returns
body:

{
    "message": "Internal server error"
}

headers:

content-length →36
content-type →application/json
date →Fri, 04 Aug 2017 12:22:12 GMT
status →500
via →1.1 2f1de9e70f3d7a82dd76483049fb670e.cloudfront.net (CloudFront)
x-amz-cf-id →nkCCBFOKNaE35vxbBduJYbd18tlKAntEt9BQkTieGvPf0o5OyCZvEQ==
x-amzn-requestid →8afbfd57-790f-11e7-aa0f-4f1e557725a5
x-cache →Error from cloudfront

Is this related to aws apiGateway issues or serverless config issues?

Thanks

@horike37

This comment has been minimized.

Copy link
Member

commented Aug 4, 2017

@choychris
I think this is neither aws apiGateway issues nor serverless config issues.
I guess that some errors has occurs in your Lambda function.
Could you see the CloudwatchLogs by using sls logs command?

@pmuens pmuens changed the title CORS error CORS error when calling function in browser Aug 4, 2017

@choychris

This comment has been minimized.

Copy link
Author

commented Aug 5, 2017

@horike37
Thanks for the help.
here is my sls logs
sls logs -s dev -f cloudVisionOcr --startTime 20170804
from my latest Serverless invoke:
serverless invoke -f cloudVisionOcr -l -s dev -p ./data/userInfo.json
screen shot 2017-08-05 at 3 02 01 pm
I get all my console.log in the function.
The response from the callback is good as well.

However, when I try to call the function from browser and postman as I mentioned above.
I get the same error and response, while no logs can be seen.

@RafalWilinski

This comment has been minimized.

Copy link
Contributor

commented Aug 5, 2017

Can you send link to your repo? We'll need more info to debug that issue.

@buggy

This comment has been minimized.

Copy link

commented Aug 5, 2017

@choychris Addings cors: true in your serverless.yml isn't enough to make CORS work. You also need to add the CORS headers to the response from your Lambda. It looks like you're trying to add at them in the request. If you're using Lambda Proxy integration (the default) then it will mean adding something like this to your response:

headers: {
  "Access-Control-Allow-Credentials": true,
  "Access-Control-Allow-Origin": "*",
  "Content-Type": "application/json",
},

Finally, if your Lambda fails for some reason (timeout, error, etc) then the response is the one generated by the API Gateway which will also lack the CORS headers.

@choychris

This comment has been minimized.

Copy link
Author

commented Aug 5, 2017

@buggy
Thanks a lot. This fixes the error.
I removed "Access-Control-Allow-Origin": "*" in my frontend request,
and then I deploy the service instead of only the function.
It works.

@choychris choychris closed this Aug 5, 2017

@pmuens

This comment has been minimized.

Copy link
Member

commented Aug 5, 2017

Thanks a lot. This fixes the error.

Super nice! Glad to hear that this fixes your problem @choychris!

Thanks for helping out @buggy, @RafalWilinski and @horike37 🙏 💯

@BlakeGuilloud

This comment has been minimized.

Copy link

commented Oct 28, 2017

@buggy !! Just wanted to say thank you so much for that comment. I have built numerous demo APIs with serverless and have NEVER been able to point to a client due to this reason. Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.