vue 代理解决跨越方法

一、什么是跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。
源指协议，端口，域名。只要这个3个中有一个不同就是跨域。

列子：
#协议跨域
http://a.abc.com访问https://a.abc.com；
#端口跨域
http://a.abc.com:8080访问http://a.abc.com:80；
#域名跨域
http://a.abc.com访问http://b.abc.com；

二、本地开发解决跨域方法

在 vue.config.js 中配置devServer

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
  lintOnSave: process.env.NODE_ENV !== 'production',
  devServer: { //跨域
    port: "8080", //端口号
    host: "localhost",
    open: true, //配置自动启动浏览器
    proxy: { // 配置跨域处理 可以设置多个
      '/api': {
        target: 'http://a.abc.com:8081',//跨域请求头信息
        changeOrigin: true,
        ws: false,
        secure: false, // 如果是https接口，需要配置这个参数
        pathRewrite: {
          '^/api': '/'
        }
         //pathRewrite: {'^/api': '/'} 重写之后url为 http://a.abc.com:8081/xxxx
         //pathRewrite: {'^/api': '/api'} 重写之后url为 http://a.abc.com:8081/api/xxxx
      }
    }
  }

发送请求：

axiosF(){
this.$axios.get("api/v2")
	.then(res=>{
		console.log(res)
	}).catch(err=>{
		console.log(err)
	})
}

请求http://localhost:8080/api/v2就会被代理到http://a.abc.com:8081/v2
注意请求后必须添加api否认不会被代理。可以设置 axios 的 baseURL 值
axios.defaults.baseURL = ‘/api’
这样会为所有的 请求url 前面都加上 ‘/api’，方便做 统一代理。

axiosF(){
this.$axios.get("/v2")
	.then(res=>{
		console.log(res)
	}).catch(err=>{
		console.log(err)
	})
}

三、正式环境中用nginx代理。

nginx.conf文件配置
server {
listen 80;
server_name a.abc.com;
location / {
# 这里是根目录的项目
try_files $uri $uri/ /index.html;
root /home/html/travel/dist;
index index.html index.htm;
}
　　　　　# 这里是需要部署的二级目录应用配置
location ^~/api/ {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://a.abc.com:8081;
}
}