http-proxy-middleware configuration proxy deployment to Nginx proxy invalid solution

It can be accessed normally during development as follows:

const {
    
    createProxyMiddleware} = require('http-proxy-middleware');

module.exports = function (app) {
    
    
    app.use(
        createProxyMiddleware('/api', {
    
    
            //target: 'http://127.0.0.1:8080',
            target: 'http://172.16.171.139:8090',
            // pathRewrite: {
    
    
            //     '^/api': '',
            // },
            changeOrigin: true,
            secure: false, // 是否验证证书
            ws: true, // 启用websocket
        }),
    );
};

The request calling code is as follows:
Insert image description hereThere is no problem with access when running locally, and no 404 occurs,
as shown in the figure below:
Insert image description hereHowever, when the program is packaged and deployed on Nginx, it is found that the interface cannot be accessed normally and the error is 404. The reason for analysis is as follows:
When developing the program, it is When running in the node environment, http-proxy-middleware is used for proxy requests. However, after packaging and deployment, it does not run in the node environment. At this time, the proxy needs to be configured on Nginx. At this time, Nginx serves proxy requests.

The solution is as follows:
Adding the following configuration to nginx.conf solves this problem:

location /api {
    
    
	proxy_pass http://localhost:8081;
	proxy_set_header Host $host:$server_port;
}

The effect is as follows: The call is successful:
Insert image description hereLinux detailed configuration:

upstream app_api {
    
    
    server 127.0.0.1:8090;
    check interval=5000 rise=1 fall=3 timeout=4000;
 }
 #react写的
server {
    
    
  listen 3000;
  server_name xxx;

  underscores_in_headers on;
  proxy_set_header Host      $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $remote_addr;
  proxy_set_header X-Request-ID $request_id;
  real_ip_header   X-Forwarded-For;
  client_max_body_size 20M;
  proxy_connect_timeout 300;
  #后端服务器连接的超时时间_发起握手等候响应超时时间
  proxy_read_timeout 300;
  #连接成功后_等候后端服务器响应时间_其实已经进入后端的排���之中等候处理(也可以说是后端服务器处理请求的时间)
  proxy_send_timeout 300;


# 手机端-前端页面
location / {
    
    
    alias  /home/app/nginx/html/; # 前端静态文件放置目录
    index index.html;
    try_files $uri $uri/ /index.html;
 }

 location  /api/{
    
    
    proxy_pass http://xxx:8090; 代理后端部署ip:端口
    proxy_set_header Host $host:$server_port;
   # proxy_set_header Host  $http_host;
    proxy_set_header Connection close;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Server $host;
    client_max_body_size 20M;
     }
 }
 ##vue写的
server {
    
    
    listen 8091;
    server_name xxx;
    index index.php index.html index.htm;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
    real_ip_header   X-Forwarded-For;

    location /api {
    
    
 #     proxy_pass http://nft;
       proxy_set_header Host  $http_host;
       proxy_set_header Connection close;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-Server $host;
       client_max_body_size 2000M;
    }

  # 运营端前端页面
  location / {
    
    
     alias /home/app/front/dist/; # 前端静态文件目录
     index index.html;
     try_files $uri $uri/ /dist/index.html;
     }
  }

Guess you like

Origin blog.csdn.net/leaning_java/article/details/126139120