目录
跨域的概念
跨域,指的是浏览器不能执行其他网站的脚本,它是由浏览器同源策略造成的,所谓同源策略是浏览器对JavaScript施加的安全限制:
同源策略:是指协议(protocol)、域名(host)、端口号(port),都必须相同,其中一个不同都会产生跨域。
不明白没关系,举个栗子:
http://www.123.com/index.html 调用 http://www.123.com/server.PHP (非跨域)
http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)
http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)
http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)
请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。
浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。
非同源限制
1.无法读取非同源网页的cookie、localStorage、IndexedDB
2.无法接触非同源网页的DOM
3.无法向非同源地址发送 Ajax请求
------------------------------------------------------------------------
解决跨域的方法
1.反向代理(推荐)
原理:在请求到达服务器前部署一个服务,将接口请求进行转发 ,通过一定的转发规则来实现将请求转发到其他服务上,来实现不跨域从而解决跨域问题
反向代理也是Nginx的特点之一,实现反向代理也需要对原Nginx进行代理服务的配置,是前后端分离开发的项目的主流
通过在前端修改 vue-cli 的配置可解决: vue-cli中的 config/index.js 下配置 dev选项的 {proxyTable}:
proxyTable: {
'/api': {
target:'http://api.douban.com/v2', // 你请求的第三方接口,真实的请求地址
changeOrigin:true, //是否跨域,在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{ // 路径重写,
'^/api': '' // 替换target中的请求地址,也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
}
}
},
2.JSONP
原理:有些标签是不受跨域限制的,如:script,img,link,iframe
优点:简单适用,兼容性好(可以兼容低版本的IE)
缺点:只支持get请求,不支持post,数据不安全
核心思想:网页通过添加一个 <script> 元素,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。
1.原生实现(JSONP 需要服务端的支持)
<script src='http://test.com/data?callback=func'></script>
<!-- 向服务器 test.com 发出请求,该请求的查询字符串有一个 callback 参数,用来指定回调函数的名字 -->
<!-- 给客户端返回数据 "func('+JSON.stringify(data)+')" ,浏览器把字符串变成 js 表达式执行 -->
<!-- func 需要是一个全局函数 -->
<script type='text/javascript'>
function func(res){
// 处理获得的数据
}
</script>
2. jQuery 提供了 JSONP 的处理方式
$.ajax({
url: 'http://www.test.com:8000/login',
type: 'get',
dataType: 'jsonp',// 设置请求方式为 jsonp
jsonpCallback: 'handleCallback',// 自定义回调函数名
data: {}
})
3.Vue.js
this.$http.jsonp('http://www.test.com:8080/login', {
params: {},
jsonp: 'handleCallback'
}).then(res => {
//
});
(本文转载自:博客园
参考文章链接:(
https://www.cnblogs.com/zhangning187/p/kywt187zn.html
https://www.cnblogs.com/sexintercourse/p/7011427.html
本文只用来学习参考,如有侵权,请联系删除)