vue跨域配置和Nginx部署vue项目报错502

 跨域配置其实下面这里已经可以了好像，就是设置changeOrigin为true启用跨域，然后设置一下要代理的目标，加上重写一下api，这个随个人项目而定。

// 跨域配置
module.exports = {
  devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
    proxy: {                 //设置代理，必须填
      '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
        target: 'http://118.31.237.112:9090/',     //代理的目标地址
        changeOrigin: true,              //是否设置同源，就是是否跨域
        pathRewrite: {                   //路径重写
          '^/api': ''                     //选择忽略拦截器里面的内容
        }
      }
    },
  }
}

在解决502报错之前，要确保后端代码正常运行

Nginx配置文件里：

server {
        listen       80;
        server_name  localhost;
        charset utf-8;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /home/server/photo/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /api/{
                proxy_pass http://118.31.237.112:9090/;
        }
}
解释看图片里吧

改一下上面的基本上差不多了，我搞了很久都没成是因为后端的代码没跑起来。因为在开始的时候我看过是能正常跑起来的，但是不知丢为什么停了，还搞了好久。

要是上面都配置了还搞不定还报502，那就看一下后端是不是正常跑起来

查看运行的jar包：

ps -ef | grep java

kill 进程号

修改代码后重新打包

上传后重新运行

nohup java -jar jar包位置 &

到这里基本上是可以解决了的，要是还不行，那我也无能为力，只能另寻高谋，我学得还浅。