首先先了解一下什么是跨域：
当浏览器的url地址的协议，域名，端口号和ajax的地址的协议，域名，端口号有一个对应不上就会发生跨域问题。
跨域有几种解决方案呢？（jsonp、cros、代理转发）
1. jsonp
需要前端和后端同时支持
前端用script+src属性, 发送函数名给后台, 同时准备好同名的函数, 准备接收数据
后端返回的字符串一定用方法名(数据字符串)格式返回, 到script标签中执行调用函数名, 并传递数据
<script>
function callBackFn(data){
// data就是'{"a": 10, "b": 20}'
}
</script>
// 通过利用 script里面的src属性发送ajax请求哪去后台返回的数据
<script src="http://后台接口地址?callback=callBackFn"></script>
<!-- 后台接口返回 'callBackFn({"a": 10, "b": 20})' -->
2. cors
前端什么都不需要做
后端需要开启cors
实际上就是在响应头添加允许跨域的源
Access-Control-Allow-Origin: 字段和值(意思就是允许去哪些源地址去请求这个服务器)
3. 代理转发（vue项目中利用vue-cli启动的webpack开发服务器进行代理）
如果后端jsonp也不弄, cors也不弄, 就给你个接口地址
我们可以在本地弄个服务器, 然后用服务器请求后台服务器接口地址
在vue.config.js - 添加规则和配置
修改webpack开发服务器的配置
devServer: {
proxy: {
// http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html
'/api': { // 请求相对路径以/api开头的, 才会走这里的配置
target: 'http://c.m.163.com', // 后台接口域名
changeOrigin: true, // 改变请求来源(欺骗后台你的请求是从http://c.m.163.com)
pathRewrite: {
'^/api': '' // 因为真实路径中并没有/api这段, 所以要去掉这段才能拼接正确地址转发请求
}
}
}
}
axios请求的代码
axios({
url: '/api/nc/article/headline/T1348647853363/0-40.html'
})
