接下来小本本准备好哦!
什么是跨域:
跨域产生在发送请求时,当请求服务器和响应服务器不是同一台时,就会产生跨域
非同源的服务器互相访问时,就会产生跨域
浏览器为了数据安全,给XMLHTTPRequest施加了安全限制,只允许页面请求自己服务器的数据
同源:
协议://ip:端口
三者都相同时,就会同源,不会有跨域问题
跨域的解决方案:
1. (主流)vue proxy 代理
1. 选择已有或者新建vue.config.js
2. 根据API接口有几台服务器来决定使用方式
方式1: 默认代理所有接口,适用于后端API接口只有一台的情况
devServer: {
proxy: 'http://16.222.11.186:443'
}
//发送时,不论任何请求工具,只需写接口地址即可,proxy会把所有接口转发到当前服务器
axios.post('/a') ==> http://16.222.11.186:44/a
方式2: 如果有请求>=2台服务器的情况(多代理分发模式)
devServer: {
proxy: {
'/key1': {
target: 'http://localhost:3333', //目标接口服务器
ws: true | false, //是否是webscoket代理 true是 false不是
changeOrigin: true, //是否跨域 true
pathRewrite: {
'^/key1': '' //请求路径修改,把区分服务器的key删掉
}
},
'/key2': {
target: 'http://www.taobao.com'
changeOrigin: true,
pathRewrite: {
'^/key2': ''
}
},
...
}
}
//请求方式
axios.get('/key1/login') ==> http://localhost:3333/login
axios.get('/key2/req/map') ==> http://www.taobao.com/req/map
此方式只需要vue服务器配置完即可实现跨域,服务器不需要设置
2. (主流)后端设置允许请求头(让服务器来解决)
(工程师设置自己服务器可允许访问的ip)
3. jsonp(由前端来解决 很古老的一种解决方案)
原理: 利用html标签的开源策略
使用script标签去发送请求
早期原生js和jquery解决跨域的方法
//这里只是jsonp的发送,怎么收服务器接口响应的值呢?
<script src='http://服务器ip:端口/接口?callback=函数'></script>
//接收
函数(res){
}
标签请求和ajax请求是不一样的,所以后端也要单独处理
这里推荐一些前端不同的面试题:
http://www.gtalent.cn/exam/interview/ISY5HtbC8uAXV39l