Currently, I am facing an issue with deploying an API for use in Front End. The API functions properly when tested alone, but it returns a CORS error when integrated into a Vue app. The specific error message is as follows:
Access to XMLHttpRequest at 'https://APIDomain/development/pin' from origin 'http://localhost:8080' has been blocked by the CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have deployed this API using serverless and configured the allowed origins in the serverless.yml file like so:
service: test-lambda-node
provider:
name: aws
runtime: nodejs12.x
stage: development
region: ap-east-1
memorySize: 512
timeout: 15
functions:
app:
handler: lambda.handler
events:
- http:
path: /
method: ANY
cors:
origin: 'http://localhost:8080'
headers:
- Content-Type
- X-Amz-Date
- Authorization
- X-Api-Key
- X-Amz-Security-Token
- X-Amz-User-Agent
allowCredentials: false
- http:
path: /{proxy+}
method: ANY
cors:
origin: 'http://localhost:8080'
headers:
- Content-Type
- X-Amz-Date
- Authorization
- X-Api-Key
- X-Amz-Security-Token
- X-Amz-User-Agent
allowCredentials: false
Even after attempting to use a wildcard to allow all types of origins, the issue persists. Manual enabling of CORS in the AWS API Gateway console has also not resolved the problem. Is there a way to configure the API to enable the CORS policy for any origin?