什么是跨域？如何解决？

r囧r小猫 2023-07-06 08:46 32阅读 0赞

1.什么是跨域？

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

2.什么是同源策略？

同源是指协议，域名，端口相同。当页面在执行一个脚本时会检查访问的资源是否同源。非同源，请求数据时，浏览器会在控制台中报一个异常，拒绝访问。

<table> 
 <tbody> 
  <tr> 
   <td style="width:219px;">当前页面的url</td> 
   <td style="width:195px;">请求页面的url</td> 
   <td style="width:189px;">是否跨域</td> 
   <td style="width:196px;">原因</td> 
  </tr> 
  <tr> 
   <td style="width:219px;"><a href="http://www.test.com/" rel="nofollow">http://www.test.com/</a></td> 
   <td style="width:195px;"><a href="http://www.test.com/index.html" rel="nofollow">http://www.test.com/index.html</a></td> 
   <td style="width:189px;">否</td> 
   <td style="width:196px;">同源（协议、域名、端口号相同）</td> 
  </tr> 
  <tr> 
   <td style="width:219px;"><a href="http://www.test.com/" rel="nofollow">http://www.test.com/</a></td> 
   <td style="width:195px;"><a href="https://www.test.com/index.html" rel="nofollow">https://www.test.com/index.html</a></td> 
   <td style="width:189px;">是</td> 
   <td style="width:196px;">协议不同（http/https）</td> 
  </tr> 
  <tr> 
   <td style="width:219px;"><a href="http://www.test.com/" rel="nofollow">http://www.test.com/</a></td> 
   <td style="width:195px;"><a href="http://www.baidu.com/" rel="nofollow">http://www.baidu.com/</a></td> 
   <td style="width:189px;">是</td> 
   <td style="width:196px;">主域名不同（test/baidu）</td> 
  </tr> 
  <tr> 
   <td style="width:219px;"><a href="http://www.test.com/" rel="nofollow">http://www.test.com/</a></td> 
   <td style="width:195px;"><a href="http://blog.test.com/" rel="nofollow">http://blog.test.com/</a></td> 
   <td style="width:189px;">是</td> 
   <td style="width:196px;">子域名不同（www/blog）</td> 
  </tr> 
  <tr> 
   <td style="width:219px;"><a href="http://www.test.com:8080/" rel="nofollow">http://www.test.com:8080/</a></td> 
   <td style="width:195px;"><a href="http://www.test.com:7001/" rel="nofollow">http://www.test.com:7001/</a></td> 
   <td style="width:189px;">是</td> 
   <td style="width:196px;">端口号不同（8080/7001）</td> 
  </tr> 
 </tbody> 
</table>

3.非同源限制

【1】不能获取非同源网页的cookie，localStorage，indexedDB

【2】不能获取非同源网页的DOM

【3】不能向非同源之地发送ajax请求

4.解决办法

常用的3中方法：

【1】通过JSONP解决

JSONP是服务器宇客户端跨源通信的常用方法。

优点：简单适用，兼容性好

缺点：这种方式只支持get请求，不支持post请求

思路：网页通过添加一个<script>元素，向服务器请求JSON数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

【2】通过nginx反向代理解决