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.
Related
Framework: Vue.js
Sending DELETE request(axios) to aws api gateway, that triggers a lambda function.
In API Gateway, I have created the DELETE method
screenshot
I have created/configured the OPTIONS method, where Gateway Responses DEFAULT 4XX AND DEFAULT 5XX are checked. Methods: DELETE and OPTIONS are checked, Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token' and Access-Control-Allow-Origin were manually set. i.e. a list of origins.
I confirm configuration was saved by taking a look at Gateway Responses
screenshot
Lambda Function created, responds with the following headers.
screenshot
Code on client side
screenshot
Executing program - Request Response does not include the Access-Control-Allow-Origins.
I've been stuck for a couple of days now, I don't know where else I should look into.
I have tried adding headers to request e.g. Access-Control-Allow-Origin: '*' ,and tried the list of specific origins that will ping the api.
set Access-Control-Allow-Origin in api gateway to '*'
uncheck Lambda Proxy Integration in Delete Method, Any Method in api gateway
lambda function response with 'Access-Control-Allow-Methods': 'list of methods'
use fetch
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
I'm hosting my react application's build on S3 bucket, and I also have a lambda function running for my API using AWS's API-Gateway.
I'm trying to send a post/get requests from my static website to this API gateway (which is also using API KEY to authorize) and I'm getting CORS error for no reason.
I've tried to debug it using postman and everything works great.
I've added x-api-key to the default headers of axios in my application and inserted the key as requested.
Is there a problem using S3 for hosting a static website that uses POST/GET requests?
btw: I've allowed CORS in my API-gateway (as I said, it works on Postman)
Thanks!
I am using S3/cloudfront hosting with custom domain (https://xxxxxx.com) and I don't have any application servers (etc. EC2).
I have contact form and find the solution I can use API from javascript (client side js). I am using webpack and reactjs.
I tried to use postmark but I have CORS issue and I couldn't use from client side js.
error:
Access to fetch at 'https://api.postmarkapp.com/email' from origin 'https://xxxxxxx.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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
If I use Amazon Simple Email Service (SES), do I still have CORS issue?
If there any other APIs I can use without CORS issue from the client side?
Thanks.
Sending email directly from client-side code would result in your SMTP credentials and any third-party API keys being public, so there is no way to achieve this.
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.