Vue跨域问题

本地：

1. main.js

加入axios.defaults.baseURL = '/api'   //作为请求前缀

或者：

2. vue.config.js

let proxyObj={};
proxyObj['/ws']={
  ws:true,
  target:"ws://localhost:8082"
};
proxyObj['/api']={
  ws:false,
  target:'http://localhost:8082',
  changeOrigin: true,
  pathRewrite:{
    '^/api':''
  }
}
module.exports={
  devServer:{
    // host:'localhost',
    // port:8080,
    proxy:proxyObj
  }
}

/api前缀会转化为’‘，因此服务端不需要api

线上：

nginx配置：

server {
    listen       8081;
    server_name  a.b.c.com;

    location ^~/api/ {
        #设置主机头和客户端真实地址，以便服务器获取客户端真实IP
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        ### Most PHP, Python, Rails, Java App canhceuse this header ###
        proxy_set_header X-Forwarded-Proto http;

        proxy_pass   http://a.b.c.com:8082/;
    }
	
	location / {
		root /opt/Vue/;
		index index.html;
	}
}

注意：proxy_pass / 结尾会转化api为空，如 /api/b 转化为 /b。

页面8081端口，服务8082端口。

页面是build后，dist目录文件

（或者里面只是static文件夹和index.html）

服务：

nohup java -Dspring.profiles.active=test -jar service-1.0.0.jar  &