如何解决跨域以及为什么会产生跨域？

悠悠 2022-11-17 03:51 168阅读 0赞

## 出现浏览器跨域的原因 ##

浏览器的同源策略指的就是协议，域名，端口，三者都相同，如果其中有一个不同就属于跨域

## 跨域可能造成的报错 ##

ajax在不同域名下的请求无法实现

![在这里插入图片描述][20210408112828729.png_pic_center]

## 常用的解决跨域的方法 ##

#### 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,它里面有这样的代码：

![在这里插入图片描述][20210408114447657.png]

再看看b.html页面的代码：  
![在这里插入图片描述][20210408114518531.png]

[20210408112828729.png_pic_center]: /images/20221022/161b107f361d4c5ca6fd51a77f308cde.png
[20210408114447657.png]: /images/20221022/355bd2c89b0b49a49e547526b2c5abef.png
[20210408114518531.png]: /images/20221022/2cbe8889c4cf4222b461d6af6d84de67.png