关于vue项目在生产环境中nginx的配置问题

Question

我在前端设置了反向代理代码如下

proxyTable: {
  '/API':{
    target: 'http://dev.snhb.group:9090',
   // target: '192.168.31.110:9090',
    changeOrigin: true,
    secure: false,
    pathRewrite: {
      '^/API':'/'
    }
  }
},

这是请求：
export function listLineSelect() {
return request({
    url: '/API/pcms/pcms/alarm/listAllLine',
    method: 'post',
    baseURL: '',
    params: {}
})

}

开发环境是没有问题的
但是在生产环境遇到了这样的问题
Request URL: http://localhost:9090/API/pcms/security/sso/ajaxcheck?account=gmservice&password=123546
Request Method: POST
Status Code: 404
Remote Address: 127.0.0.1:9090
Referrer Policy: no-referrer-when-downgrade

我想变成这样的请求http://localhost:9090/pcms/security/sso/ajaxcheck?

所以我尝试在nginx进行了如下配置
server {

    listen       9090;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;
    
    location ~* /api/ {
        proxy_pass  http://dev.snhb.group:9090;
        root   html;
        index  index.html index.htm;
    }
    

并没得用。不知道大家有没有好办法呢。。谢谢了

Answer 1

listen       9090; // 这个如果和你后台服务器是配在一起的就不能用9090了  端口换一个9000往上的
server_name  localhost;

#charset koi8-r;

#access_log  logs/host.access.log  main;

location / {
    root   "这里填你项目打包生成的目录地址";
    index  index.html index.htm;
}

###新增
location /API/ { // 这里你必须写大写的API  你自己配的是这个
    proxy_pass  http://dev.snhb.group:9090/; // 这个写你接口地址   这样/API/就代表你这个地址
    proxy_redirect  off;
    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_connect_timeout  150;
    proxy_read_timeout  300;
    proxy_send_timeout  300;
}

然后nginx重启

Answer 2

我的配置大概是这样的没问题

    listen       4000;
    server_name  127.0.0.1;
    root        /mnt/e/work/management/dist/;

    location / {
      index  index.html;
    }
    location /api/ {
      proxy_pass http://127.0.0.1:3000/;
    }