Vue开启客户端跨域

简介

  同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

Ajax请求

目前很多项目使用前后端分离的架构，但是由于浏览器有同源策略的关系，会阻止前端发送请求。

同源策略

对于这种情况我们可以在服务器端开启跨域，或者在客户端开启跨域来解决这个问题。

在Vue中我们可以在main.js中添加以下代码

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.prototype.$axios = axios
axios.defaults.baseURL = "/api"
Vue.use(VueAxios, axios)

在Vue项目的config文件夹中的index.js中找到proxyTable: { },在里面添加信息

        proxyTable: {
            '/api':{
                target: "http://xx.xxx.xx.xxx",  // 跨域的服务器地址
                changeOrigin:true,     // 是否开启跨域
                pathRewrite:{
                    '^/api':''          // 路径重写
                }
            }
        },

如果使用ajax的话可以不添加以上代码只需要在请求头部添加/api（或者其他字符串都可以,只需要与proxyTable中的描述相符即可）