vue代理访问api 报错404 502错误解决

最近有个项目中，因为访问不到api 接口，导致项目页面不可访问

在本地调试中一切显示正常，但是一旦上线就不行:

通过调试模式查看接口访问报错404，找不到接口。

通过postman 查看接口访问地址没有问题

我就猜想是不是因为nginx配置的问题，然后通过实验来测试猜想

1 安装nginx并配置配置文件等映射

docker run -di --name=liubijun_nginx -p 80:80  -v /root/nginx/log:/var/log/nginx -v /root/nginx/conf.d:/etc/nginx/conf.d  -v /root/nginx/nginx.conf:/etc/nginx/nginx.conf  -v /root/nginx/html:/usr/share/nginx/html nginx

2 编制配置文件

这里的核心思想是通过重写，地址的思路

[root@localhost conf.d]# cat default.conf 
server {
    listen       80;
    server_name  192.168.85.183;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location ~ /abc/ {
          rewrite  ^/abc/(.*)$ /$1 break;
	  proxy_pass http://192.168.85.1:9004;
	} 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }


}

3 测试

实际后台接口地址为：http://192.168.85.1:9004/user/listno

代理后暴露的地址为：http://192.168.85.183/abc/user/listno

#浏览器中输入
http://192.168.85.183/abc/user/listno