I have an HTTPApi API Gateway created with the Serverless Framework. But for some routes, the CORS is not working.
provider:
name: aws
runtime: nodejs12.x
stage: dev
region: us-west-2
timeout: 29
httpApi:
cors:
allowedOrigins:
- '*'
allowedMethods:
- GET
- OPTIONS
- POST
- PUT
- DELETE
allowedHeaders:
- Content-Type
- X-Amz-Date
- Authorization
- X-Api-Key
- X-Amz-Security-Token
- X-Amz-User-Agent
- X-Transaction-Key
- Access-Control-Allow-Origin
I tried setting the cors:true option on the provider but still doesnt work.
This is the response returned on all routes wether it is 4xx or 2xx codes.
return {
statusCode: StatusCode,
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials" : true,
"Access-Control-Allow-Headers" : "*",
"Access-Control-Allow-Methods": "OPTIONS,POST,GET,PUT,DELETE"
},
body: JSON.stringify(Res, null, 2),
};
If I check the console I can see that the options are indeed applied
However, some routes actually work
And some others don't, the ones that don't work have the X-Transaction-Key header and the OPTIONS does not return the access-control-allow-headers: authorization,content-type,x-amz-date,x-amz-security-token,x-amz-user-agent,x-api-key,x-transaction-key header
What am I missing?
Thanks in advance
I have faced a similar problem. After 3 days of pulling my hair. I have found my problem. Everything was ok except, In my client, there were few wrong URLs(spelling mistakes) pointing to my server API. This is why few API was ok and few of them not working properly.
After fixing to the right URL everything is ok. Here is my learning, hope someday it will help others:
Check you're serverless.yml file's cors section, here is an example
cors:
origin: '*'
headers:
- Content-Type
- X-Amz-Date
- Authorization
- X-Api-Key
- X-Amz-Security-Token
allowCredentials: false
Check Lamdba for proper response header as question contains
Additional Tools for troubleshooting:
https://aws.amazon.com/premiumsupport/knowledge-center/api-gateway-cors-errors/
https://aws.amazon.com/premiumsupport/knowledge-center/support-case-browser-har-file/
https://toolbox.googleapps.com/apps/har_analyzer/
Hope it will be helpful, Thanks!
Happy Coding
Have you tried fixing the 'cors: true' value in the function event as in Serverless with cors ?
Related
I'm working on AWS Lambda using serverless framework and I need to specify two methods in functions.yml for each of the API. For example, if I have to create an endpoint for getting books http://basic-url.com/api/books/all. I have to add two methods for it in functions.yml as follows.
get_books:
handler: books/handler.get_books
tags:
Name: get-books
events:
- httpApi:
method: GET
path: /api/books/all
get_books_preflight:
handler: default/handler.get_preflight
tags:
Name: get-preflight
events:
- httpApi:
method: OPTIONS
path: /api/books/all
I have to specify preflight for all of endpoints that I want to create in functions.yml. Is there any way to manage these preflight endpoints for each endpoint automatically?
There is no need to create a function for each preflight endpoint.
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:
Includes an Origin header.
Uses the OPTIONS method.
Includes the following headers:
Access-Control-Request-Method
Access-Control-Request-Headers
To support CORS, therefore, a REST API resource needs to implement an OPTIONS method that can respond to the OPTIONS preflight request with at least the following response headers mandated by the Fetch standard:
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Allow-Origin
With Serverless Framework you can do this in two easy steps:
Add the cors: true flag to each HTTP endpoint in your serverless.yml:
getBooks:
handler: books/handler.getBooks
tags:
Name: get-books
events:
- http:
path: /api/books/all
method: GET
cors: true
Add the following headers to your response:
module.exports.getBooks = (event, context, callback) => {
// Do work to retrieve a Book
const book = retrieveBook(event);
const response = {
statusCode: 200,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Headers': 'Authorization',
},
body: JSON.stringify({
book: book
}),
};
callback(null, response);
};
Eventually, if you use Javascript, take a look to Middy middleware engine for use with Lambda. It has a lot of nice middlewares and one is the cors middleware, which automatically adds CORS headers to your functions.
I am using Serverless and I have a lambda that is available via API Gateway. Like many of the CORs questions that mention a similar stack, I am getting the following error when making a call from a browser (usual Postman/curl local testing works just fine):
Access to XMLHttpRequest at 'https://<gatewayUrl>/dev/login/?userType=userA' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field z-client-timezone is not allowed by Access-Control-Allow-Headers in preflight response
The Integration Request type is Lambda_Proxy
Cors has been enabled, adding the Options Method
The lambda handler returns the expected headers
The axios request sends one custom header Z-Client-Timezone that is also allowed in the Lambda
I've tried everything including everything here, but no luck.
I'm extremely frustrated so any help would be awesome. One more thing, when I do curl -i -X OPTIONS https://<gatewayUrl>/dev/login I get this result, which seems to be missing Z-Client-Timezone:
HTTP/2 200
content-type: application/json
content-length: 0
date: Fri, 10 Jul 2020 04:00:10 GMT
x-amzn-requestid: <aws_requestId>
access-control-allow-origin: *
access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
x-amz-apigw-id: <apigw-id>
access-control-allow-methods: OPTIONS,POST
via: 1.1 <id>.cloudfront.net (CloudFront), 1.1 <id>.cloudfront.net (CloudFront)
x-amz-cf-pop: DFW50-C1
x-cache: Miss from cloudfront
x-amz-cf-pop: DFW55-C1
x-amz-cf-id: <cf-id>
My Lambda:
export async function login(event) {
const headers = {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true
}
....
return {
statusCode: 200,
headers,
body: JSON.stringify(session)
};
}
My Serverless.yml:
login:
handler: dist/src/handlers/auth.login
events:
- http:
path: login
method: post
cors:
origin: '*'
headers:
- Access-Control-Allow-Credentials
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'
I would love any help you can give. I've omitted some code as everything else works except for the cors stuff so I've just included that but if more clarification is needed, I'm happy to provide.
While your lambda function is allowing the Z-Client-Timezone header, the built-in options method of AWS is not.
In order to allow this, you can do the following -
login:
handler: dist/src/handlers/auth.login
events:
- http:
path: login
method: post
cors:
origin: '*'
headers:
- Access-Control-Allow-Credentials
- Z-Client-Timezone
Then add any other headers you are also sending.
I'm trying to create a function with CORS enabled.
The function works as expected using Postman (cors headers present), but I get CORS error when trying from a browser (no cors header).
const getTicket = async event => {
var ticketNumber = Date.now();
return {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Methods': '*',
'Access-Control-Allow-Origin': '*',
},
statusCode: 200,
body: JSON.stringify({"ticketNumber": ticketNumber})
};
};
functions:
getTicket:
handler: code/common/ticket.getTicket
runtime: nodejs12.x
events:
- http:
method: get
path: getTicket
cors: true
authorizer:
arn: ${self:custom.auth0.authorizer_arn}
I also tried few more ways of writing the serverless.yaml file, but none of them worked, the only difference between them being the created methods in my API Gateway. Sometimes I got GET+OPTIONS methods, sometimes only GET, but never worked with CORS.
I get the error:
"Access to XMLHttpRequest at 'https://...amazonaws.com/prod/getTicket' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
What you are likely seeing is that the server is returning an error before it reaches your return statements. In other words, API Gateway is returning a 502 or 403 (as these are the most common errors), and those specific returns have no CORS headers present by default in API Gateway. I would recommend using CloudWatch to inspect the specific Lambda invocations to determine if your Lambda function itself is erroring out and correct that.
You can also force your API Gateway to return the CORS headers for all responses. In the resources section of the serverless.yml file you can do the following and add any additional entries for other status codes:
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'
Questions:
IntegrationResponse to Sam template ? Is it possible without OpenApi?
Way to add headers to GatewayResponses in SAM template?
What im trying to achive:
Define gateway responses and integration responses inside a SAM
CloudFront template.
What i checked so far:
SAM github link
SAM issue
I was checking SAM github but for me it wasnt clear how to do it based on the above link.
Also i didnt found any answer on stackoverflow which would explain why the headers are bad in my gatewayresponse snippet
Every Help is appreciated
Some examples:
Globals:
Api:
GatewayResponses:
MISSING_AUTHENTICATION_TOKEN:
ResponseParameters:
# gatewayresponse.header.Cache-Control: "no-cache"
ResponseTemplates:
"application/json" : '{"errors": [{errorKey: "error Value"}]}'
StatusCode: '404'
#defaultResponse: true
Expected function level integrationResponse:
Function:
Type: AWS::Serverless::Function
Properties:
Handler: Function.handler
Timeout: 20
CodeUri: "src/Function"
Role: .......
Events:
FunctionGet:
Type: Api
Properties:
Path: /Function
Method: get
IntegrationResponse:
SOME_ERROR_CODE
ResponseTemplates
integrationresponse.header
So long story short half of my question is stupid. in proxy integration API GW is by defult returning the response from server to client no need further declaration in SAM template.
As for the headers the following way is the correct:
Globals:
Api:
GatewayResponses:
MISSING_AUTHENTICATION_TOKEN:
ResponseParameters:
Headers:
Access-Control-Allow-Origin: "'*'"
Access-Control-Allow-Headers: "'*'"
Cache-Control: "'no-cache'"
Content-Type: "'application/json'"
ResponseTemplates:
"application/json" : '{"errors": [{errorKey: "error Value"}]}'
StatusCode: '404'
#defaultResponse: true
I know this question might be duplicated, but none of the existing question point to anything I'm not doing...
I've deployed an API using the serverless framework, but I'm having trouble with CORS.
I'm doing a get request using axios:
axios.get('https://test.execute-api.us-west-1.amazonaws.com/dev/test?from=2012-01-09T21:40:00Z')
.then(response => {
this.data = response.data;
})
.catch(error => console.log(error))
And I'm getting the following error:
Access to XMLHttpRequest at 'https://test.execute-api.us-west-1.amazonaws.com/dev/test?from=2012-01-09T21:40:00Z' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
What I've already done:
Made sure there's an OPTIONS method in API Gateway with a method response that looks like this:
Made sure I deployed those changes.
Also, the response of my Lambda function is returning the following headers:
return events.APIGatewayProxyResponse{
StatusCode: http.StatusOK,
Headers: map[string]string{
"Access-Control-Allow-Origin": "http://localhost:8080",
"Access-Control-Allow-Credentials": "true",
},
Body: string(jsonEvents),
}, nil
I also tried setting Access-Control-Allow-Origin to '*'
My serverless.yml file has cors: true on each of the function events:
functions:
deploymentFrequency:
handler: bin/update/deployment-frequency
events:
- http:
path: deployment-frequency
method: post
cors: true
fetchDeploymentFrequency:
handler: bin/fetch/deployment-frequency
events:
- http:
path: deployment-frequency
method: get
cors: true
What am I missing? Nothing seems to work. The request works fine from Postman and it looks to be including the headers, so this seems to be an issue with the OPTIONS method.
My configuration is:
(event, context, callback) => {
callback(null, {
statusCode: (code || 200),
body: JSON.stringify(resp),
headers: { 'Access-Control-Allow-Origin': '*'},
});
}
and it works fine for me. I use to have the same issue as you before, but as long as you define your function with CORS: true and your response contains the header, you should be fine.
Note: Im didnt understand the sintax "map[string]string" and credentials should not be necessary at this case.
It turns out I was ignoring the status code from the response :(
I realized I was actually getting two errors:
A 406 status code for a missing Content-Type header
The CORS error
The first error was caused because I wasn't passing the Content-Type header to the request (I had a check in my code I completely forget that expects that header).
The second error was caused because I didn't add the Access-Control-Allow-Origin header to the error response of my function.
Enable Lamba proxy integration
return events.APIGatewayProxyResponse{
StatusCode: http.StatusOK,
Headers: map[string]string{
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json",
},
Body: string(jsonEvents),
}, nil
In your terminal, go to the root project path and run:
npm i cors
And, after you need put this code in your index.js:
const cors = require("cors");
app.use(cors());