vue项目本地解决跨域问题以及nginx线上解决跨域及代理

1.Nginx 部署 Vue 项目报 500 错误

2.vue解决跨域问题

1.本地vue项目解决与后端联调跨域问题

// 跨域配置
module.exports = {
    // publicPath:'./',   //可以理解成build出来的index.html从哪里找他引用的js、css等文件。默认是"/"从根目录寻找
    publicPath:'./',
    devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
        port: 8080,//9876前端端口
        proxy: {                 //设置代理，必须填
            '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:8085',     //代理的目标地址 后端域名或者ip地址需要加端口号
                changeOrigin: true,              //是否设置同源，输入是的
                pathRewrite: {                   //路径重写
                    '^/api': ''                     //选择忽略拦截器里面的单词
                }
            }
        }
    }
}

2.Nginx 部署 Vue 项目报 500 错误
将你的dist文件夹上传到/var下面即不会出现bug
nginx.conf的server节点配置如下

server {
      listen 8080;     #1.你想让你的这个项目跑在哪个端口
      server_name localhost;     #2.当前服务器ip
      #添加头部信息
      proxy_set_header Cookie $http_cookie;
      proxy_set_header X-Forwarded-Host $host;
      proxy_set_header X-Forwarded-Server $host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-real-ip $remote_addr;
      location / {
       root  /var/nginx/dist;     #3.dist文件的位置
       index index.html; 
       try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写)
   
       }

      location /api/ {
       rewrite ^/api/(.*) /$1 break;                   # 做 统一代理
       proxy_pass http://xxx:5000/;    #  后端服务  ip、端口
       add_header ‘Access-Control-Max-Age’ 0;
       proxy_set_header Cookie $http_cookie;
       proxy_set_header X-Forwarded-Host $host;
       proxy_set_header X-Forwarded-Server $host;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-real-ip $remote_addr;
       }
      error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
      }
   }