来自来源'http://localhost:8080'的AWS API网关已被CORS策略阻止

Question

我试图部署一个API用于前端。当单独测试API时，它是工作的，但当集成到Vue应用程序中时，它返回CORS错误，错误返回是：

CORS策略阻止从来源“http://localhost:8080”访问位于“https://apidomain/development/pin”的XMLHttpRequest：请求的资源上没有“Access-Control-Allow-Origin”标头。

我使用serverless来部署这个API，我已经设置了这个serverless.yml中允许的起源：

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

Answer 1

向API发送请求时，将access-control-allog-origin标头添加到Vue应用程序中。

另外，如果使用cookie，请将Serverless.yml中的AllowCredentials和Vue应用程序中的Access-Control-Allow-Credentials设置为true。

无服务器-CORS生存指南：https://www.Serverless.com/blog/cors-api-gateway-surventy-guide