AWS Elastic Beanstalk 上的 Axios CORS 问题答案

【问题标题】：Axios CORS issue on AWS Elastic BeanstalkAWS Elastic Beanstalk 上的 Axios CORS 问题
【发布时间】：2020-12-31 03:47:35
【问题描述】：

我在 aws Elastic Beanstalk 上有一个 fastapi 主机。我想构建一个 vue 应用来与之交互。

但是，当我尝试时

const res = await axios.post(baseUrl, 
        {
          HMA_lat: 22.33012,
          HMA_Lng: 114.1641913,
          blg_age: 19
        },
        {
          headers:{
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
          }
        }
      )

在浏览器控制台中，出现 CORS 错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://..... (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

我应该修改 Elastic Beanstalk 服务器中的设置吗？如果是这样，我该怎么做？

【问题讨论】：

标签： amazon-web-services vue.js axios amazon-elastic-beanstalk

【解决方案1】：

您可以通过将 Allow-Control-Allow-Origin 添加到您的 chrome 浏览器并在其中添加您的本地主机来在本地系统上解决此问题。有一个similar 问题可能会对您有所帮助。

【讨论】：

我已经尝试了一些插件。但仍然得到错误：跨域请求被阻止：同源策略不允许读取192.168.0.147/predict 的远程资源。（原因：CORS 预检响应未成功）。`
我应该在 fastapi 中更改我的代码吗？ fastapi.tiangolo.com/tutorial/cors
@JOHN 如果 CORS 配置设置不正确，则会出现浏览器控制台。检查你的配置

【解决方案2】：

我需要在 FastAPI 中添加 CORS（跨域资源共享）中间件

参考：https://fastapi.tiangolo.com/tutorial/cors/

【讨论】：