vue-cli中的跨域之proxytable

为什么会有跨域？

浏览器有一个叫做同源策略的东西。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

同源策略规定了如果两个页面的协议、域名、端口中任意一个不相等，就认为两个页面具有不相同的源

两个不同源的页面资源交互会受到浏览器的同源策略限制，也就出现了我们说的跨域问题

 

那应该怎么办？

其实我们可以通过配置 vue 项目中的 config/index.js 来解决问题。

将 dev 中的 proxyTable 改为如下：

只需要将我们请求的跨域域名写在target里面

proxyTable: {

 '/api': {

 target: 'http://touch.piao.qunar.com/',  //拿去哪儿网域名举例

 changeOrigin: true,

 pathRewrite: {

  '^/api': ''

 }

 }

},

 

然后我们在页面中使用axios请求时api 后面写我们要请求的具体链接就可以了  /api/就代表了我们在index中配置的域名啦

axios.get("/api/xxxxx)