docker vue nginx 反向代理404 跨域_vite 加前缀 nginx 404

场景：前端vue+vite，要通过docker nginx部署，后端请求没有统一的前缀，前端就自己加了一个/api，打包部署后访问就404

nginx代码:

#user  root;
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    client_max_body_size    50M;
 
    server {
        listen       80;
        server_name  localhost;
 
 
        location / {
            root   /usr/share/nginx/html;
            try_files $uri $uri/ /index.html;
            index index.html index.htm;
        }
 
        location /api {
            proxy_pass http://xxxxx:xx;
            proxy_set_header Host $proxy_host; proxy_redirect off;
           
        }
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}
 

经过：前后端都不是我做的，经过多番查找，发现/api这个前缀是前端加的，为啥?因为后端没有公共的前缀，没法做代理，所以前端加个这。nginx要代理也要有个公共前缀，那就想办法请求后去掉呗。

解决方法：在/api 和proxy_pass http://xxxxx:xx 后面都加/，单独给proxy_pass http://xxxxx:xx;后面加不行；

#user  root;
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    client_max_body_size    50M;
 
    server {
        listen       80;
        server_name  localhost;
 
 
        location / {
            root   /usr/share/nginx/html;
            try_files $uri $uri/ /index.html;
            index index.html index.htm;
        }
 
        location /api/ {
            proxy_pass http://xxxx:xx/;
            proxy_set_header Host $proxy_host; proxy_redirect off;
           
        }
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}
 

其实和docker没关系