I am using AWS API Gateway and Lambda Function for one of my applications.
When I send a POST request to API Gateway, it results in an error:
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8888' is therefore not allowed
access. The response had HTTP status code 400
I enabled CORS in the API Gateway console and added 'Access-Control-Allow-Origin' to "Access-Control-Allow-Headers" and clicked "Enable CORS and replace existing CORS Header" button. It was a success.
But when I reloaded the page, I found 'Access-Control-Allow-Headers' header was not present in "Access-Control-Allow-Headers".
I don't know why AWS is not allowing me to edit "Access-Control-Allow-Headers".
I enabled CORS in the API Gateway console and added 'Access-Control-Allow-Origin' to "Access-Control-Allow-Headers" and clicked "Enable CORS and replace existing CORS Header" button. It was a success.
OK, these are two entirely separate headers. Access-Control-Allow-Origin is a response header which must be sent in response to both preflight OPTIONS requests and the actual POST/GET requests. Access-Control-Allow-Headers is a separate response header which is only sent in response to a preflight OPTIONS request.
Can you provide a screenshot showing exactly what you entered where?
I just enabled CORS for two of my APIs in AWS Gateway.
Even after enabling CORS in Gateway API CORS settings, I had faced CORS problem due to these reasons.
CORS Settings: That's the starting point. In CORS settings on API Gateway allow CORS for you origin.
Till you debug CORS issue, you may keep the least restrictive setting as shown below.
Access-Control-Allow-Origin=*
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
(you may even add all headers here during debugging)
Access-Control-Max-Age=0
Access-Control-Expose-Headers, Access-Control-Allow-Headers may be left as default.
Null Origin: For local development, I was running my front-end application directly from the file system without a web-server. AWS CORS setting do not support null origin. I then hosted my local application on nodejs http-server. Now the application has origin localhost. And CORS setting worked fine on one of my APIs.
API path must match. For the second API, I still faced the CORS issue. Despite have the same settings as other API and hosted on a web server. The problem here was that this API had integration at the root and for this case, API must end with /. It was very annoying that I was focusing only on CORS setting where the problem was somewhere else.
If CORS settings do not work for you, you may want to implement root OPTION and return proper CORS headers.
Related
I writing a serverless website using Amazon Web Services S3, Lambda, and the HTTP API Gateway, not the REST API Gateway. I am trying to set a cookie with one of my lambda functions and it works when I hit the lambda function directly using the lambda function url, but when I hit the url using the HTTP API Gateway, the Set-Cookie header is stripped off. The body, and all other custom headers are present, but the set-cookie header is just gone.
I've tried with and without the domain=***.com in the header and that doesn't make a difference.
I've tried messing with CORS and enabling Access-Control-Allow-Credentials. I've set Access-Control-Allow-Origin to the correct domain name. I've tried both set-cookie and * for Access-Control-Allow-Headers and Access-Control-Expose-Headers. Although I don't think CORS really matters because I'm using Postman and my understanding is it doesn't require CORS.
Does the HTTP API Gateway just not support setting cookies? It would be great if that was documented somewhere.
I forgot that I was using CloudFront. By default CloudFront does not forward cookies to or from the origin, so I had to set the CloudFront caching policy to allow that. More information here: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Cookies.html
I have scoured over 25 SO posts about this but cannot find a solution to my problem. I have an API Gateway with an HTTP API + route that utilizes a Lambda function integration. From SO posts and AWS documentation, I am reading conflicting information:
From the AWS documentation, I see
If you configure CORS for an API, API Gateway automatically sends a response to preflight OPTIONS requests, even if there isn't an OPTIONS route configured for your API. For a CORS request, API Gateway adds the configured CORS headers to the response from an integration.
If you configure CORS for an API, API Gateway ignores CORS headers returned from your backend integration.
This is exactly what I did; I configured my CORS as follows:
photo
However, I still get the errors:
Access to fetch at 'https://domain.execute-api.aws-region.amazonaws.com/dev/upload' from
origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight
request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is
present on the requested resource. If an opaque response serves your needs, set the
request's mode to 'no-cors' to fetch the resource with CORS disabled.
From Cloudwatch, I can see the requests being sent to the API, but for some reason the header isn't properly configured. I do not understand this because I thought API Gateway should handle OPTIONS pre-flight requests for HTTP APIs. I cannot find out what I'm doing wrong.
I had a similar issue, the preflight response had no CORS headers. I noticed that the preflight request included the header: Access-Control-Request-Headers: Content-Type
As soon I added Content-Type to the list of Access-Control-Allow-Headers in the HTTP API configuration it worked for me.
If you configure CORS for an API, API Gateway automatically sends a
response to preflight OPTIONS requests
I think that rule doesn't work for the POST method, because I met the same issue. Then I tried to add an OPTIONS route manually, everything works well.
Route image
The AWS HTTP API is configured as shown below.
AWS API
The CORS Preflight request is still throwing the following error:
Preflight response from the Browser
CORS headers is missing in the pre flight. I have tried to configure it in different without luck.
And I do not have the options configured in the routes of the HTTP API.
Finally I was able to solve it by removing the CORS configuration and adding a route OPTIONS with a lambda integration to return the relevant CORS headers.
Unlike the REST API aws API gateway the OPTIONS do not seems to have a mock integration.
I have an aws lambda setup using nodejs to basically receive a request with query parameters, trigger another https request and then send the response back.
Configuration for this otherwise is essentially default.
I have then added a trigger to this lambda in the form of an api gateway HTTP api (not REST api).
I have managed to get the api itself to work however I am getting blocked with the usual CORS issues. (i verified the path with Moesif CORS and origin changer to make sure everything else works and it does).
My CORS configuration in the api gateway is basically set to have
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
Access-Control-Expose-Headers: No Expose Headers are allowed
Access-Control-Max-Age: 0 seconds
Access-Control-Allow-Credentials: No
I keep finding different pages explaining how to enable cors and so on but mostly seem to be either for an old version of the configuration or for REST api's which look to be quite different.
As it stands, I get this error so i never am allowed to use my api:
Access to fetch at 'https://path.to.my.api?query1=a' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I would want to either allow all origins or disable CORS completely for this really.
Disclaimer: I am quite new to the whole aws infrastructure so some terminology related to it might still be not yet understood.
Edit 1:
After some more digging. I have realised that the call that is failing with the cors error is the first of the two calls happening.
That is to say, this is the call that is ending up on my google domain (which normally would redirect temporarily to my aws gateway - this was setup following instrctions on aws to make a "synthetic record" on the domain settings to return a 302 to the execute-api.eu-central-1.amazonaws.com url), not the call that returns the actual data.
Edit 2:
I have tried adding a route in my api gateway for OPTIONS on the same path, pointed to my lambda which returns the appropriate headers when triggered, however this doesn't seem to get called at all in this case. So i imagine api gateway is trying to handle it on its own but failing somehow
I have deployed a React App (Frontend) on S3 and a Laravel PHP API (Backend) via Elastic Beanstalk on AWS.
My react app has API calls on my backend but unfortunatelly they are blocked by CORS.
Access to XMLHttpRequest at 'http://platform-name-api.eu-central-1.elasticbeanstalk.com/api/v1/something' from origin 'http://platform-name-web.s3-website.eu-central-1.amazonaws.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Anyone knows whats the issue here?
The Access-Control-Allow-Origin HTTP response header referred to in the error message is part of the CORS standard which allows granted person to explicitly grant permission to yours site to access the data via browser.
A basic implementation would just include:
Access-Control-Allow-Origin: *
The response headers to permit any website to read the data.
Access-Control-Allow-Origin: http://ExampleHelloWorld.com/
This would allow only a specific site to access it, and granted person can dynamically generate that based on the Origin request header to permit multiple, but not all, sites to access it.
To solve this, CORS configuration must be enabled for the specific bucket refer this Doc
Updated Answer: (If CORS is disabled from API)
When a browser receives a non-simple HTTP request, the CORS protocol requires the browser to send a preflight request to the server and wait for approval (or a request for credentials) from the server before sending the actual request. The preflight request appears to your API as an HTTP request that
You need to make sure that the server can listen for the preflight request
(which will be OPTIONS (and not GET, POST or whatever you were trying
to send)
Respond to it with the right Access-Control-Allow-Origin header but
also Access-Control-Allow-Methods
Access-Control-Allow-Headers to allow your specific HTTP methods or
headers
as mentioned in this Doc