I have been struggling with setting up AWS API Gateway to pass Query string parameters to my Lambda function.
If I set to API to use Lambda proxy integration, I get a CORS error at the Web client
[index.html:1 Access to XMLHttpRequest at 'https://g2kza1o79f.execute-api.eu-west-2.amazonaws.com/prod/gettest8' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.]
( - even when I have set the API with CORS enabled.
If I set the API to not use Lambda proxy integration, and CORS enabled, the API call works (no CORS error), but the event object received in my Lambda function is empty( hence no query string parameters).
In both cases I am using the GET method.
I can see in the Method Response Header the Access-Control-Allow-Origin option is present, but cannot access the Integration Response
Question: How can I set-up my API to pass query string parameters through to my Lambda function without getting the CORS error? I will also be wanting to set up APIs for POST requests to other Lambda functions.
I believe it is related to First Enable CORS Then Deploy API.
A good thread could be found here.
API Gateway CORS: no 'Access-Control-Allow-Origin' header
Related
The 429 responses issued by API Gateway (when lowering the max concurrent requests and exceeding it) do not have the CORS headers, so the ajax request in the browser just throws error without any info that could selectively make it trigger a retry.
Any workaround but for retrying any error in the client app / i.e. any work around to have AWS include the CORS headers in the 429 response? CORS is enabled in API gateway, the OPTIONS method is there and responds the headers, and a lambda responds them itself (proxy integration) - all works well but for the 429.
I had a similar issue that was resolved by this answer. You need to create a custom response for 4** and 5** templates. You can do it manually in the AWS console, like so:
Remember to redeploy the API after changing this.
If API Gateway returns 429 you're probably hitting the limit for Lambda's lambda concurrency (or at least that was in my case). The CORS headers are not being sent to the client, since API Gateway blocks the request before hitting your Lambda.
I am trying to set up an API Gateway to call another lambda function that will upload an image to S3. The feature works well when I am using an app like POSTMAN, however when I run the browser using React I am getting the following error.
Access to fetch at 'https://.../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.
In my API Gateway I have the following configuration for that method
Gateway Responses for UserUpload API: default 4XX (not checked), default 5XX (not checked)
Methods: post (checked), options (checked)
Access-Control-Allow-Methods: options, post
Access-Control-Allow-Headers: '*'
Access-Control-Allow-Origin: '*'
This API uses an authorizer, I am using the one provided by Auth0 and have not edited the code at all.
And the function that my authorizer calls returns the response like the below (eg happy path):
exports.handler = async (event) => {
//do data checks and upload to s3
return {
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Methods": "*",
"Access-Control-Allow-Origin": "*",
},
statusCode: 200,
body: JSON.stringify({ message: "success" }),
};
This is my first time setting up both a lambda function, authorisation provider and API Gateway so I might be missing something obvious. I have also tried added mode: no-cors to my fetch POST requests however they still fail in a very similar way.
From what I can tell by looking at the logs of the authorizer and the lambda function that uploads the images, is that they are not even being called. So it appears the CORS error is with the API Gateway.
I have seen in a few tutorials that in their aws template yaml files they add an option AddDefaultAuthorizerToCorsPreflight as False. I can't see this anywhere in the API Gateway console.
Update: I have tested my function with the custom authoriser turned off and it works. So I know that CORS works for the options method, and for the returned request on the lambda function. It is the custom authoriser that is the problem.
The flow is currently:
Method Request - Auth: my-auth-0-authorizer
Integration Request - Type: Lambda_proxy
Lambda function
Integration response - [greyed out Proxy integrations cannot be configured to transform responses]
Method Response: HTTP Status: Proxy (with Access-Control-Allow-Origin in the response headers)
What do I have to do differently or change to allow my authoriser to respect the CORS config?
Update: After leaving my API Gateway for a day, successful responses are now working (using the flow mentioned above). I am not sure if there was a glitch in the system or there was unexpected occurring but it is now working. I am still getting a CORS issue but now only with bad responses.
The custom authoriser fails by return context.fail("Unauthorized"); and when this occurs my browser gets a CORS error. Do I have to set up special gateway responses for 4XX responses?
I am trying to generate grafana dashboard by calling the spring REST API using simple-json-datasource.
Implemented all required APIs (/, /search, /query) for enabling simple-json-datasource and maintained the contract as expected by grafana simple-json-datasource.
Also, added the CORS as part of response header and even enabled the CORS for the request API by adding the #CrossOrigin at ****#RestController**.
When i test the APIs, i am getting following header information in the response of the call
{
“access-control-allow-headers”: “Content-Type, Accept”,
“access-control-allow-methods”: “POST, GET”,
“access-control-allow-origin”: “*”,
“connection”: “keep-alive”,
“content-type”: “application/json”,
“date”: “Thu, 14 May 2020 16:51:18 GMT”,
“keep-alive”: “timeout=60”,
“transfer-encoding”: “chunked”,
“vary”: “Origin, Access-Control-Request-Method, Access-Control-Request-Headers”
}
But while creating the datasource by pointing to /, i was getting the below error
Access to XMLHttpRequest at ‘http://localhost:8888/streams/api/’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘*, *’, but only one is allowed.
Input request for the API call is : curl -X GET --header ‘Accept: application/json’ ‘http://localhost:8888/streams/api/’
Any clue?
To make the integration working, we referred one of the sample API application provided, https://github.com/bergquist/fake-simple-json-datasource (fake-simple-json-datasource). APIs has to follow below protocols,
API / is of type GET, while /search, /query and /annotations are of method types POST
/ API is used for creating the datasource in Grafana
/search API has no input, but the response of this API will be used as a one of the input to /query
/query API, as different response structures depending upon the type of matric selected in dashboard
APIs has to be enabled CORS with origins and allowedHeaders
The response of the API has to have header details
Headers should have access-control-allow-methods, access-control-allow-headers and set to POST and accept, content-type respectively. These two properties are mandatory for the response header
I can't Enable CORS on my API Gateway instance, this is how it looks:
1. Settings:
2. Result:
I've tried a bunch of things like checking the DEFAULT 4XX and DEFAULT 5XX and manually inputting the Access-Control-Allow-Methods as suggested in some posts.
If I hover over the error I get: Invalid Response status code specified.
I'm able to GET using my browser but POST can only be done from Postman. My ReactJS website won't post either, throwing:
Access to XMLHttpRequest at <ENDPOINT> from origin <S3-REACT-BUCKET> has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I've read that I have my React app should send the CORS headers (haven't got to that) but I can't even Enable CORS in the API Gateway!
That was because No Method Response
You shouldn't manually go on the console to enable CORS. Instead follow this guide from the serverless framework.
In short:
set cors: true in your http event
return {'Access-Control-Allow-Origin': '*','Access-Control-Allow-Credentials': true} in your handler
When i send Authorization Header from rest client(postman), also from browser, to back end springboot(2.0.3v) AuthorizationService (without API Gateway), the 'Authorization' Header will be exists and every flow works fine.
But when i send the same Header through API Gateway, The 'Authorization' Header will be missed. This header will be present in all filters of API Gate way. But it will be missed in backend(AuthorizationService)'s filter.
Kindly help what might be cause? any filter is intercepting to avoid Authorization Header? I have also registered CORS Filter with Access-Control-Allow-Origin to "" and Access-Control-Allow-Headers to "".
API gateway has a lambda proxy integrated when you are integrating lambda function with it, if ur wrapping a http url to it, you need to pass the header in Method integration section and also enable CORS by clicking on resource and manually adding the headers with custom name and enabling cors might help.