About this Article
This section describes how to configure the API Gateway authorizer to be able to CORS on the Serverless Framework.
The details are transcribed below, with an outline added.
- https://serverless.com/blog/cors-api-gateway-survival-guide/#cors-with-custom-authorizers
- https://github.com/serverless/serverless/issues/3896#issuecomment-326721971
explanation
About CORS
To make the API CORS-like, the API response header must return "Access-Control-Allow-Headers" and "Access-Control-Allow-Origin".
If you go to [Resources] - [Enable CORS] in API Gateway, API Gateway will configure everything necessary for CORS.
The CORS setting for API Gateway can be configured in Serverless by stating "CORS: true" in serverless.yml as shown in Listed on the official website.
About CORS for authorizers
In addition to the above, another step is required to set up CORS when using the authorizer in the API.
If the authentication is successful, the original API is called, so there is no problem with the CORS response settings. However, if the authentication fails, the API is not called and the response is returned from the authorizer, so separate CORS settings are required for the error response from the authorizer. Therefore, it is necessary to set up CORS separately for error responses from the authorizer.
Without this setting, even if authentication fails and a response is received, a CORS error will occur at the client and the authentication error will not be detected.
Procedure (using API Gateway)
The following response headers should be returned in the "401 Unauthorized response" and "500 Authorizer Failure response
- 「Access-Control-Allow-Headers」：「'*'」
- 「Access-Control-Allow-Origin」：「'*'」
The settings are made in [Gateway Response].
.
Difference between 401 and 500
As per Mentioned in official help, if an error is returned with callback("Unauthorized"), it will be "401 Unauthorized", and if an error is returned with anything other than ""Unauthorized"", it will be "500 Internal Server Error response". (Both are set in this article)
Procedure (using Serverless)
The configuration is the same as when using the API Gateway described above, but since the API Gateway cannot be changed directly, the API Gateway configuration is done in "resources" in serverless.yml.
serverless.yml
resources: Resources: GatewayResponse401: Type: 'AWS::ApiGateway::GatewayResponse' Properties: ResponseParameters: gatewayresponse.header.Access-Control-Allow-Origin: "'*'" gatewayresponse.header.Access-Control-Allow-Headers: "'*'" ResponseType: UNAUTHORIZED RestApiId: Ref: 'ApiGatewayRestApi' StatusCode: '401' GatewayResponse500: Type: 'AWS::ApiGateway::GatewayResponse' Properties: ResponseParameters: gatewayresponse.header.Access-Control-Allow-Origin: "'*'" gatewayresponse.header.Access-Control-Allow-Headers: "'*'" ResponseType: AUTHORIZER_FAILURE RestApiId: Ref: 'ApiGatewayRestApi' StatusCode: '500'
Now, response headers are returned even in the case of authentication failure, and CORS can be performed even for APIs using the authorizer.
Other
Serverless uses CloudFormation to create AWS resources, and the gateway response configuration is almost the same as Description of GatewayResponse in CloudFormation.
