跨域
来源:互联网 发布:淘宝内部优惠券赚佣金 编辑:程序博客网 时间:2024/06/06 01:41
一、什么是跨域?
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript的安全限制。浏览器均默
认开启了同源策略,它指Ajax请求所在的页面和被请求的页面在协议、域名、端口均相同才能被访问。(所谓同源,就是浏览器
协议、域名、端口均相同)。跨域问题只存在于浏览器端,不存在于服务器端。
请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。
浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。
二、怎样实现跨域请求?
1、基于script标签实现跨域
script标签本身就可以访问其它域的资源,不受浏览器同源策略的限制,可以通过在页面动态创建script标签,代码如下:
var script = document.createElement('script'); script.src = "http://aa.xx.com/js/*.js"; document.body.appendChild(script);
这样通过动态创建script标签就可以加载其它域的js文件,然后通过本页面就可以调用加载后js文件的函数,这样做的缺陷就是不能
加载其它域的文档,只能是js文件,jsonp便是通过这种方式实现的,jsonp是跨域请求的一种方法,jsonp的要点是通过向其它域
传入一个callback参数,通过其他域的后台将callback参数值和json串包装成javascript函数返回,因为是通过script标签发出的请求,
浏览器会将返回来的字符串按照javascript进行解析执行,实现了域与域之间的数据传输。 jquery中对jsonp的支持也是基于此方案。
Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如
<script>、<img>、<iframe>);
注意:jsonp只支持GET方法,不支持POST。
2、后台代理
这种方式可以解决所有跨域问题,也就是将后台作为代理,每次对其它域的请求转交给本域的后台,本域的后台通过模拟http请求
去访问其它域,再将返回的结果返回给前台,这样做的好处是,无论访问的是文档,还是js文件都可以实现跨域。例如
www.123.com/index.html 需要调用 www.456.com/server.php,可以写一个接口 www.123.com/server.php,由这个接口在后端去
调用 www.456.com/server.php 并拿到返回值,然后再返回给index.html,这就是一个代理的模式。相当于绕过了浏览器端,自然
就不存在跨域问题。
3、PHP 端修改 header(XHR2方式)
在php接口脚本中加入以下两句即可:
header('Access-Control-Allow-Origin:*'); //允许所有来源访问
header('Access-Control-Allow-Method:POST,GET'); //允许访问的方式
4.基于iframe实现跨域
基于iframe实现的跨域要求两个域具有 aa.xx.com,bb.xx.com 这种特点,也就是两个页面必须属于一个基础域(例如都是
xxx.com,或是 xxx.com.cn ),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加
document.domain,就可以实现父页面调用子页面的函数,代码如下:
页面一:
<html> <head> <script> document.domain = "xx.com"; function aa(){ alert("p"); } </script> </head> <body> <iframe src="http://localhost:8080/CmsUI/2.html" id="i"> </iframe> <script> document.getElementById('i').onload = function(){ var d = document.getElementById('i').contentWindow; d.a(); }; </script> </body> </html>
页面二: <html> <head> <script> document.domain = "xx.com"; function a(){ alert("c"); } </script> </head> <body> </body> </html>
这时候父页面就可以调用子页面的a函数,实现js跨域访问 - 跨域
- 跨域
- 跨域
- 跨域
- 跨域
- 跨域
- 跨域
- 跨域
- 跨域
- 跨域
- 跨域
- 跨域
- 跨域
- 跨域
- 跨域
- //跨域
- 跨域
- 跨域
- springboot 集成 mybatis
- 11. Container With Most Water
- caffe代码阅读7:Caffe中卷积的实现
- A1067. Sort with Swap(0,*) (25)
- python笔记-list and dict
- 跨域
- mysql存储过程(后台学习之路六)
- 前端开源项目周报0207
- 学习vue.js心得
- 高并发解决方案——提升高并发量服务器性能解决思路
- 编程学习
- 轻松看懂机器学习十大常用算法
- 【设计模式】【八】外观模式
- vc编写自己的动态链接库