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

Posted 2023-03-04

【中文标题】CORS - Api 网关、lambda 和 vue.js [关闭]

【英文标题】：CORS - Api Gateway, lambda, and vue.js [closed]

【发布时间】：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

【参考方案1】：

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