来自起源“ http：// localhost：8080”的AWS API GATEWAY已被CORS策略禁止

问题描述

我正在尝试部署要在前端使用的API。单独测试API时可以使用，但是在Vue应用程序中集成时返回CORS错误，错误返回为：

在以下位置访问XMLHttpRequest 'https：// APIDomain / development / pin' 来自来源“ http：// localhost：8080”的信息已被CORS策略阻止： 请求中没有'Access-Control-Allow-Origin'标头 资源。

我正在使用无服务器来部署此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

我还使用通配符允许所有类型的来源，但仍然无法使用。我还尝试在AWS API Gateway控制台中手动启用CORS，但仍然无法正常工作。 我有什么办法允许此API对任何来源启用CORS策略？

解决方法

问题

CORS标头不是从您的Vue应用程序发送的。

解决方案

向API发送请求时，向您的Vue应用添加Access-Control-Allow-Origin标头。

注意

此外，如果您使用的是cookie，请在serverless.yml中将allowCredentials设置为Access-Control-Allow-Credentials，并将Vue应用中的true设置为{{1}}。

参考

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