VUE-axios 解决跨域问题

vue-axios跨域问题发现:

https://github.com/Aealen/TopicSelection-VUE

使用vue-axios向后端发送请求的时候遇到如下报错:

vue-axios跨域问题原因:

什么是跨域

**跨域：**指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

**例如：**a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；

如下表给出了相对http://www.example.com/dir/page.html的同源检测示例：

URL	结果	原因
http://www.example.com/dir2/other.html	成功	协议、域名、端口相同
http://www.example.com/dir/inner/another.html	成功	协议、域名、端口相同
https://www.example.com/secure.html	失败	协议不同 ( HTTPS )
http://www.example.com:81/dir/etc.html	失败	端口不同 ( 81 )
http://news.example.com/dir/other.html	失败	域名不同

vue-axios跨域问题解决:

在config\index.js中的proxyTable中添加...

JavaScript

 proxyTable: {
      '/apis': {
        target: 'http://localhost:8080/',  //要解决跨域的接口的域名
        secure:false,           //如果是https接口，需要配置这个参数
        changeOrigin: true,  // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/apis': '/'  // 路径重写
        }
      },
    },