NGINX 不会将调用从 React 应用程序路由到后端应用程序 [英] NGINX not routing calls from react app to backend app

问题描述

我有一个 AWS Ubuntu 服务器，它托管一个在 127.0.0.1:4100 上运行的 React 前端，并使用端口 127.0.0.1:1323 对 Go 应用程序进行 api 调用.我在 /etc/nginx/sites-available/default 配置文件中为这两个端口安装了 Nginx 和设置代理传递，但我只让前端被 Nginx 调用.使用 chrome inspect 检查为什么 Go 应用程序没有提供 react 应用程序的某些功能，我看到了这个错误

I have an AWS Ubuntu server that hosts a react front end running at 127.0.0.1:4100 and makes api calls to a Go app using port 127.0.0.1:1323. I installed Nginx and setup proxy pass for these two ports in /etc/nginx/sites-available/default config file but I only get the front end getting called by Nginx. Using chrome inspect to check why the Go app is not serving some of the functionalities from the react app, I see this error

client.js:772 GET http://127.0.0.1:1323/api/net::ERR_CONNECTION_REFUSEDERROR 错误:请求已被终止 可能的原因:网络离线、Access-Control-Allow-Origin 不允许 Origin、页面正在卸载等.

client.js:772 GET http://127.0.0.1:1323/api/ net::ERR_CONNECTION_REFUSED ERROR Error: Request has been terminated Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.

我做错了什么?下面是我的默认配置文件

What am I doing wrong? Below is my default config file

server { 

listen 80 default_server; 
listen [::]:80 default_server; 

server_name _; 

location / { 

proxy_pass http://127.0.0.1:4100; 

} 

location /api { 

proxy_pass http://127.0.0.1:1323/; 

 } 
}

推荐答案

您的服务器正在侦听端口 80:

Your server is listening to port 80:

listen 80 default_server; 
listen [::]:80 default_server; 

因此，您应该向该端口发出请求:

So, you should make your request to that port:

GET http://127.0.0.1/api/     => http://127.0.0.1:1323/
GET http://127.0.0.1:80/api/  => http://127.0.0.1:1323/
GET http://127.0.0.1/         => http://127.0.0.1:4100/
GET http://127.0.0.1:80/      => http://127.0.0.1:4100/

然后 nginx 应该正确代理您的请求.

Then nginx should correctly proxy your requests.

为了更清楚地了解 nginx 配置.

To be more clear about nginx config.

server { 

listen 80 default_server;  // The port nginx is listening to ipv4
listen [::]:80 default_server; // The port nginx is listening to ipv6

server_name _; 

location / { // When you call this location...

proxy_pass http://127.0.0.1:4100; // You'll be redirected to this location

} 

location /api { // When you call this location...

proxy_pass http://127.0.0.1:1323/; // You'll be redirected to this location

 } 
}

您的配置没问题 根据 nginx 文档.

你说你的客户端试图访问 http://127.0.0.1:1323/api/ 但它应该请求 http://127.0.0.1/api/code>(没有端口)被重定向到 http://127.0.0.1:1323/.

You said your client is trying to reach http://127.0.0.1:1323/api/ but It should be requesting http://127.0.0.1/api/ (whitout the port) to be redirected to http://127.0.0.1:1323/.

这是另一个例子:

server { 

    listen 80; 

    server_name localhost anywebsite.com; 

    location ~* ^/MyApp {
        proxy_pass http://localhost:5130;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_send_timeout 2m;
        proxy_read_timeout 2m;
    }
}

在这种情况下，每次我的 url 以 /MyApp 结尾时，例如:http://anywebsite.com/api/MyApp 我被代理到 http://localhost:5130.但是如果我尝试访问 http://localhost:5130 或 http://anywebsite.com:5130/api/MyApp 我将无法访问，因为 nginx 是仅侦听端口 80.如果你想访问另一个端口，你需要像这样指定:

In this case, everytime my url ends with /MyApp ex.: http://anywebsite.com/api/MyApp I'm being proxyed to http://localhost:5130. But if I try to access http://localhost:5130 or http://anywebsite.com:5130/api/MyApp I won't be able because nginx is listening to port 80 only. If you want to access another port you need to specify like this:

server {
    listen 80; 
    listen 5130; 

[...]

这篇关于NGINX 不会将调用从 React 应用程序路由到后端应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！