CORS - Api 网关、lambda 和 vue.js [关闭]答案

【问题标题】：CORS - Api Gateway, lambda, and vue.js [closed]CORS - Api 网关、lambda 和 vue.js [关闭]
【发布时间】：2020-11-29 05:27:51
【问题描述】：

我很困惑为什么在调用我的受自定义授权方保护的 API 时收到以下 CORS 错误：

从源“http://localhost:8080”访问“https://...”处的 XMLHttpRequest 已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头出现在请求的资源。

在我的 SAM 模板中，我设置了我认为从本地计算机访问所需的内容：

      Type: AWS::Serverless::Api
      Properties:
        StageName: Prod  
        Cors:
          AllowHeaders: "'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization'" 
          AllowOrigin: "'*'"

当我使用有效令牌通过 Postman 调用时，我得到了正确的响应，其中包含所有必需的响应标头：

访问控制允许来源 *

Access-Control-Allow-Headers Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token

Access-Control-Allow-Methods GET,OPTIONS

然而，当我使用 axios 在我的 vue 应用程序中调用时，我收到了上述错误：

  mounted() {
      …

      const config = {
        headers: {
          authorization: jwt
        }
      }

      axios.get(‘…..’, config)
        .then(val => this.info = val)
        .catch(err => console.log(err))
      }
  }

不知道为什么从 Postman 调用，一切看起来都很好并且工作正常。但从 vue 来看，它不是。

感谢任何帮助。谢谢。

【问题讨论】：

使用浏览器开发者工具中的“网络”选项卡检查您发出的确切请求以及返回的标头。当您设置请求标头时，我希望此请求会触发预检 OPTIONS 请求。同样，“网络”选项卡应显示这是否正在发生以及是否成功。
添加@skirtle 建议的内容：当您查看浏览器开发工具中的“网络”选项卡时，还要检查响应的 HTTP 状态代码。如果 Chrome 没有向您显示，请使用 Firefox 中的“网络”选项卡。是 4xx 还是 5xx 错误而不是 200 OK 成功响应？
如果您使用 Postman 进行测试，请不要忘记添加 Origin 请求标头，例如 Origin: http://localhost:8080

标签： api aws-lambda axios cors aws-api-gateway

【解决方案1】：

问题在于响应代码。原来我的自定义授权者期望在 Auth 标头前添加一个“不记名”。我没有在我的应用程序中这样做，它返回了授权错误。我只是将 CORS 设置为 200。

【讨论】：