Javascript 烧瓶/反应器/Nginx/Dockerfile-CORS问题

我试图使用Nginx作为反向代理，在Heroku上部署一个Flask后端和一个React.js前端，只有一个dyno。当我使用flask和react.js内置服务器时，一切都正常工作，但我无法使它与Nginx一起正常工作，无论是在本地服务器还是Heroku服务器上

烧瓶代码

从烧瓶导入烧瓶，请求
从LASKU cors进口cors
从LASKU restful导入Api，资源
导入时间
# ------------------------------------------------------------------------------
#烧瓶应用程序配置+CORS
# ------------------------------------------------------------------------------
调试=真
app=烧瓶（名称）
app.config.from\u对象（\u名称\u）
#从前端应用程序接受CORS
API_CORS_原产地=[
"http://localhost:8080",
]
CORS（应用程序，源代码=API\u CORS\u源代码，支持\u凭证=True）
# ------------------------------------------------------------------------------
#RESTFUL API
# ------------------------------------------------------------------------------
API_前缀='/API'
api=api（前缀=api\U前缀）
类AuthenticationAPI（资源）：
def get（自我）：
返回{'res'：'get'}，200
def post（自我）：
打印（request.get_json（））
返回{'res'：'post'}，200
类时间API（资源）：
def get（自我）：
返回{'res'：time.time（）}，200
添加资源（AuthenticationAPI，“/auth”）
api.add_资源（TimeAPI，“/time”）
api.init_应用程序（应用程序）

Javascript代码

从“axios”导入axios；
康斯特阿皮乌尔酒店http://localhost:5000/api'
const callBackendAuth=async（）=>等待axios({
方法：“post”，
标题：{
“内容类型”：“应用程序/json”
},
模式：“cors”，
url:`${apirl}/auth`，
数据：{
'username'：'user1'，
“密码”：“密码1”
}
})。然后（res=>{
console.log（res）
}).catch（错误=>{
控制台错误（err）
});
const callBackendTime=async（）=>axios({
方法：“get”，
标题：{
“内容类型”：“应用程序/json”
},
模式：“cors”，
url:`${APIRL}/次`
})。然后（res=>{
控制台日志（res）；
}).catch（错误=>{
控制台错误（err）
})

Nginx配置

server {
  listen 80; # $PORT;

  # ----------------------------------------------------------------------------
  # Serve the static files
  # ----------------------------------------------------------------------------
  root /usr/share/nginx/html;
  index index.html index.html;

  location / {
    try_files $uri $uri/ =404;
  }

  # https://create-react-app.dev/docs/production-build/#static-file-caching
  location /static {
    expires    1y;
    add_header Cache-Control "no-cache";
  }

  # ----------------------------------------------------------------------------
  # Allow access to backend using Nginx as reverse proxy
  # ----------------------------------------------------------------------------
  location /api {
    include             proxy_params;
    proxy_pass          http://127.0.0.1:5000;
    proxy_http_version  1.1;
    proxy_redirect      default;
    proxy_set_header    Upgrade $http_upgrade;
    proxy_set_header    Connection "upgrade";
    proxy_set_header    Host $host;
    proxy_set_header    X-Real-IP $remote_addr;
    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header    X-Forwarded-Host $server_name;
  }
}

---

这里的问题是Nginx代理没有将响应头从JavaScript应用程序传递到客户端。您需要在Nginx配置中使用

add\u header Access Control Allow Origin”设置这些头https://url";

或使用

proxy\u pass\u header

指定标题在最终结果中没有改变任何内容，但感谢您的建议，我添加了

proxy\u pass\u header

。如果您在浏览器中打开JavaScript应用程序，您可以通过打开开发工具来验证标题是否在那里问题不是来自JavaScript应用程序，我做了进一步的调查，问了一个更精确的问题，如果你有同样的问题：。