Nginx 不代理从 react 前端应用程序到 flask 后端的 api 请求

Nginx not proxying api requests from react frontend app to flask backend

提问人:Habeeb Dindi 提问时间:11/16/2023 最后编辑:Habeeb Dindi 更新时间:11/16/2023 访问量:36

问:

我和一位同事构建了一个 react+flask 应用程序。我们已经设置了所有基本的服务器配置,除了来自 react 应用程序内部的内部 api 调用外,其他所有配置都运行良好。

nginx 上,我代理了两个请求,一个是 react 应用程序,一个是 flask 应用程序。react 应用程序中的文件向 flask 应用程序 (api) 发出请求

不知何故,nginx 阻止了这个请求。请看下面我的第二个服务器配置的nginx:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name artisan-02.myartisan.works;

    location / {
         proxy_pass http://localhost:3000;
         proxy_set_header Host $host;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_set_header X-Real-IP $remote_addr;
         add_header X-Served-By artisan-02;
    }

    location /api/ {
         proxy_pass http://localhost:5001;
         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-Proto $scheme;
         add_header X-Served-By artisan-02;
    }
} 

访问 api 地址表明它确实可以从外部来源访问

❯ curl -sL https://myartisan.works/api/v1/contractors/5
{"address":"4333 Nolan View\nMckeemouth, MN 12184","bookings":[{"booking_date":"2023-09-11T15:18:52","contract_id":null,"contractor_id":5,"id":1,"service_id":5,"status":"pending","user_id":6,"user_reviews":...}

这确认了仅当从 react 应用程序内部调用 api 地址时才会出现问题。

来自 NGINX 的错误日志

2023/11/16 11:33:11 [error] 13480#13480: *3005 connect() failed (111: Connection refused) while connecting to upstream, client: 174.138.92.85, server: artisan-01.myartisan.works, request: "GET /static/js/bundle.js HTTP/1.1", upstream: "http://127.0.0.1:3000/static/js/bundle.js", host: "myartisan.works"
2023/11/16 11:35:58 [error] 13480#13480: *3007 connect() failed (111: Connection refused) while connecting to upstream, client: 174.138.92.85, server: artisan-01.myartisan.works, request: "GET /api/v1/contractors HTTP/1.1", upstream: "http://127.0.0.1:5001/api/v1/contractors", host: "myartisan.works"

我将 react 应用程序中的调用从 http://127.0.0.1:5001/api/v1/resource 更改为 http://127.0.0.1:80/api/v1/resource,因为 nginx 在端口 80 上侦听传入的 http 请求,我希望这些请求随后会代理到 flask 实例。

任何帮助将不胜感激

ReactJS nginx Flask 服务器

评论


答: 暂无答案