目标
- 回顾什么是跨域
- 跨域的几种解决方案是什么
回顾
-
什么是跨域:
- 网页所在url的协议, 域名, 端口号, 和Ajax请求url的协议, 域名, 端口号有一个对应不上, 就发生跨域
- 跨域是浏览器对ajax做出的限制
-
演示用axios请求网易新闻地址, 发现跨域报错
axios({
url: 'http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html'
}).then(res => {
console.log(res)
})
原因: 前端->后端接口跨域问题, 但是后端既不支持jsonp也不开启cors, 前端无法直接请求
解决: 跨域解决方案第三种, 用代理服务器
使用: 还好webpack开发服务器, 默认就支持代理转发的功能, 但是需要你配置代理转发的地址
(1): 在vue.config.js中, 设置devServer服务器配置项
(2): axios请求, 要请求本地开发服务器相对地址开头
(3): 改完配置重启服务器
jsonp方式
-
需要前端和后端同时支持
前端用script+src属性, 发送函数名给后台, 同时准备好同名的函数, 准备接收数据
后端返回的字符串一定用方法名(数据字符串)格式返回, 到script标签中执行
调用函数名, 并传递数据
-
例子代码(看看就行, 不用尝试)
<script> function callBackFn(data){ // data就是'{"a": 10, "b": 20}' } </script> <script src="http://后台接口地址?callback=callBackFn"></script> <!-- 后台接口返回 'callBackFn({"a": 10, "b": 20})' -->
cors方式
-
前端什么也不用做
-
后端需要开启cors
实际上就是在响应头添加允许跨域的源
Access-Control-Allow-Origin: 字段和值(意思就是允许去哪些源地址去请求这个服务器)
代理转发
-
如果后端jsonp也不弄, cors也不弄, 就给你个接口地址
我们可以在本地弄个服务器, 然后用服务器请求后台服务器接口地址
-
但是vuecli脚手架, 启动了一个webpack开发服务器, 它就能做代理转发
- 而且前端和这个服务器是同源的都是8080端口
-
需要修改webpack开发服务器的配置即可
更多配置项参考这里: https://webpack.docschina.org/configuration/dev-server/#devserverproxy
在vue.config.js文件中配置：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
devServer: { // 服务器代理配置
proxy: { // 代理配置
// 后台完整接口：http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html
'/api': { // 请求路径已api开头的，才会走这个配置
target: 'http://c.m.163.com', // 在请求的axios的url前面拼接target地址
// target+url变成服务器代理请求的完整路径
// http://c.m.163.com+/nc/article/headline/T1348647853363/0-40.html
changeOrigin: true, // 改变请求来源（欺骗后台你的请求是从http://c.m.163.com）
pathRewrite: {
'^/api': ''// 因为真正路径中并没有/api这段，所以要去掉这段才能得到正确的请求地址
}
}
}
})axios请求的代码修改url：
axios({
url: '/api/nc/article/headline/T1348647853363/0-40.html'
}).then(res => {
console.log(res)
})
小结
- 跨域几种解决方案?
- jsonp / cors / 代理转发
- vuecli环境如何设置代理转发?
- 在vue.config.js - 添加规则和配置