vue 解决跨域的问题

(1).什么是跨域

跨域：由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况：

网络协议不同，如http协议访问https协议。

端口不同，如80端口访问8080端口。

域名不同，如qianduanblog.com访问baidu.com。

子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。

域名和域名对应ip,如www.a.com访问20.205.28.90.

下面是项目使用vue-cli脚手架搭建

使用http-proxy-middleware 代理解决跨域问题

例如请求的url:“http://f.apiplus.cn/bj11x5.json”

1、打开config/index.js,在proxyTable中添写如下代码：

proxyTable: {

  '/api': {  //使用"/api"来代替"http://f.apiplus.c"

    target: 'http://f.apiplus.cn', //源地址

    changeOrigin: true, //是否跨域

    pathRewrite: {

      '^/api': 'http://f.apiplus.cn' //路径重写

      }

  }

}

2、使用axios请求数据时直接使用“/api”：

getData () {

axios.get('/api/bj11x5.json', function (res) {

  console.log(res)

})

通过这中方法去解决跨域，打包部署时还按这种方法会出问题。解决方法如下：

let serverUrl = '/api/'  //本地调试时

// let serverUrl = 'http://f.apiplus.cn/'  //打包部署上线时