跨域

最新推荐文章于 2022-09-14 14:51:34 发布

y刺猬的拥抱

最新推荐文章于 2022-09-14 14:51:34 发布

阅读量127

点赞数

一、什么是跨域?

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript的安全限制。浏览器均默

认开启了同源策略，它指Ajax请求所在的页面和被请求的页面在协议、域名、端口均相同才能被访问。（所谓同源，就是浏览器

协议、域名、端口均相同）。跨域问题只存在于浏览器端，不存在于服务器端。

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

二、实现跨域请求的常用方法？

1、基于script标签实现跨域

script标签本身就可以访问其它域的资源，不受浏览器同源策略的限制，可以通过在页面动态创建script标签，代码如下：

 
   [javascript]  
   view plaincopy
<span style="font-size:14px;">var script = document.createElement('script');    
script.src = "http://aa.xx.com/js/*.js";    
document.body.appendChild(script);  </span>  

这样通过动态创建script标签就可以加载其它域的js文件，然后通过本页面就可以调用加载后js文件的函数，这样做的缺陷就是不能

加载其它域的文档，只能是js文件，jsonp便是通过这种方式实现的，jsonp是跨域请求的一种方法，jsonp的要点是通过向其它域

传入一个callback参数，通过其他域的后台将callback参数值和json串包装成javascript函数返回，因为是通过script标签发出的请求，

浏览器会将返回来的字符串按照javascript进行解析执行，实现了域与域之间的数据传输。 jquery中对jsonp的支持也是基于此方案。

Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如

注意：jsonp只支持GET方法，不支持POST。

2、CORS 实现跨域

兼容性：IE9+, IE8 - IE9 需要用 window.XDomainRequest. 来兼容。

CORS 的全称是“跨域资源共享”。可以用来弥补 JSONP 只支持 GET 的不足，CORS 支持所有的 HTTP 请求方式。

需要浏览器和服务器的同时支持。CORS 用到的是 XMLHttpRequest2。使用 CORS 发起的跨域请求写法跟原生的 AJAX 写法差不多。

CORS 背后的基本思想是使用自定义的 HTTP 头部允许浏览器和服务器相互了解对象，从而决定请求或响应成功与否。

CORS 还能实现：

1）请求时间有效性（验证 timestamp 与服务接到请求的时间相差是否在指定范围呢，比如5分钟内）

2）token 验证

3）ip 验证

4）来源验证

例如：

 
   [javascript]  
   view plaincopy
{  
     'name': 用户名,  
    ‘key: 加密的验证key,  //(name+secret+timestamp来通过不可逆加密生成)  
    ‘timestamp’: 时间戳,  //验证timestamp与服务接到请求的时间相差是否在指定范围内，比如5分钟内  
}  

详细资源文章：http://caibaojian.com/cors-post.html

http://www.ruanyifeng.com/blog/2016/04/cors.html

http://www.cnblogs.com/linda586586/p/4351452.html

3、服务器端代理（反向代理）

这种方式可以解决所有跨域问题，也就是将后台作为代理，每次对其它域的请求转交给本域的后台，本域的后台通过模拟http请求

去访问其它域，再将返回的结果返回给前台，这样做的好处是，无论访问的是文档，还是js文件都可以实现跨域。例如

www.123.com/index.html 需要调用 www.456.com/server.php，可以写一个接口 www.123.com/server.php，由这个接口在后端去

调用 www.456.com/server.php 并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然

就不存在跨域问题。因为跨域只存在于客户端，服务端不存在跨域的问题。

4.基于iframe实现跨域

基于iframe实现的跨域要求两个域具有 aa.xx.com,bb.xx.com 这种特点，也就是两个页面必须属于一个基础域（例如都是

xxx.com，或是 xxx.com.cn ），使用同一协议（例如都是 http）和同一端口（例如都是80），这样在两个页面中同时添加

document.domain，就可以实现父页面调用子页面的函数，代码如下：

页面一：

 
   [html]  
   view plaincopy
<span style="font-size:14px;"><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>  </span>  

页面二：

 
   [html]  
   view plaincopy
<span style="font-size:14px;"><html>    
 <head>    
  <script>    
    document.domain = "xx.com";    
    function a(){    
    alert("c");    
     }    
  </script>    
 </head>    
 <body>    
 </body>    
</html>  </span>  

这时候父页面就可以调用子页面的a函数，实现js跨域访问

y刺猬的拥抱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域

一、什么是跨域?跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript的安全限制。浏览器均默认开启了同源策略，它指Ajax请求所在的页面和被请求的页面在协议、域名、端口均相同才能被访问。（所谓同源，就是浏览器协议、域名、端口均相同）。跨域问题只存在于浏览器端，不存在于服务器端。请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域...
复制链接

扫一扫