js跨域

最新推荐文章于 2023-10-12 09:16:40 发布

zy_.

最新推荐文章于 2023-10-12 09:16:40 发布

阅读量157

点赞数 1

文章标签： jsvascript 跨域

本文链接：https://blog.csdn.net/weixin_44023012/article/details/88673419

版权

javascript的跨域问题

一、什么是跨域？

1.定义：跨域是指从一个域名的网页去请求另一个域名的资源。但是一般情况下不能这么做，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域。

同源是指，域名，协议，端口均相同。这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。

对于端口和协议的不同，只能通过后台来解决。

二、为什么浏览器要限制跨域访问呢？

安全问题：如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题：

用户访问www.mybank.com ，登陆并进行网银操作，这时cookie啥的都生成并存放在浏览器
用户突然想起件事，并迷迷糊糊地访问了一个邪恶的网站 www.xiee.com
这时该网站就可以在它的页面中，拿到银行的cookie，比如用户名，登陆token等，然后发起对www.mybank.com 的操作。
如果这时浏览器不予限制，并且银行也没有做响应的安全处理的话，那么用户的信息有可能就这么泄露了。

三、为什么要跨域？

既然有安全问题，那为什么又要跨域呢？有时公司内部有多个不同的子域，比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。

三种方法实现js跨域访问

javascript跨域访问是web开发者经常遇到的问题，什么是跨域，一个域上加载的脚本获取或操作另一个域上的文档属性，下面将列出三种实现javascript跨域方法:

1.基于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 a(){  
      alert("a");  
   }  
  </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.aa();  
       
 };  
   </script>  
 </body>  
</html>

页面二：

<html>  
 <head>  
  <script>  
    document.domain = "xx.com";  
    function aa(){  
    alert("a");  
     }  
  </script>  
 </head>  
 <body>  
 </body>  
</html>

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

2.基于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通过向其它域传入一个callback参数，通过其他域的后台将callback参数值和json串包装成javascript函数返回，因为是通过script标签发出的请求，浏览器会将返回来的字符串按照javascript进行解析执行，实现了域与域之间的数据传输。
jquery中对jsonp的支持也是基于此方案。

3.后台代理方式

这种方式可以解决所有跨域问题，也就是将后台作为代理，每次对其它域的请求转交给本域的后台，本域的后台通过模拟http请求去访问其它域，再将返回的结果返回给前台，这样做的好处是，无论访问的是文档，还是js文件都可以实现跨域

zy_.

关注

1
点赞
踩
0

收藏

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

javascript的跨域问题一、什么是跨域？二、为什么浏览器要限制跨域访问呢？三、为什么要跨域？三种方法实现js跨域访问1.基于iframe实现跨域2.基于script标签实现跨域3.后台代理方式一、什么是跨域？1.定义：跨域是指从一个域名的网页去请求另一个域名的资源。但是一般情况下不能这么做，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是...
复制链接

扫一扫