出现浏览器跨域的原因
浏览器的同源策略指的就是协议,域名,端口,三者都相同,如果其中有一个不同就属于跨域
跨域可能造成的报错
ajax在不同域名下的请求无法实现
常用的解决跨域的方法
1. JSONP跨域
JSONP(JSON with Padding: 填充式JSON)
JSONP应用的技巧:
在HTML标签里,一些标签比如link、href、img这样的标签是没有跨域限制的。
- jsonp如何使用
<body>
<script type="text/javascript">
function func1(ret){
console.log(ret)
}
</script>
<script src="https://www.baidu.com/s?ie=UTF-8&wd=" type="text/javascript" charset="utf-8"></script>
</body>
2. CORS跨域
后端修改请求头
header(‘Access-Control-Allow-Origin:*’);允许访问的网址
header(‘Access-Control-Allow-Method:POST,GET’);允许访问的方式
3. nginx反向代理
www.baidu.com/index.html需要调用www.sina.com/server.php,可以写一个接口www.baidu.com/server.php,由这个接口在后端去调用www.sina.com/server.php并拿到返回值,然后再返回给index.html
4. postMessage
关键点:
postMessage是h5引入的一个新概念,现在也在进一步的推广和发展中,他进行了一系列的封装,我们可以通过window.postMessage的方式进行使用,并可以监听其发送的消息;
兼容性:
移动端可以放心用,但是pc端需要做降级处理
优点:
不需要后端介入就可以做到跨域,一个函数外加俩个参数(请求url,发送数据)就可以搞定;
移动端兼容性好;
5.通过window.name跨域
window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。
比如:有一个页面a.html,它里面有这样的代码:
再看看b.html页面的代码:
转载:https://blog.csdn.net/Z_hai_yan/article/details/115512376