JavaScript系列—JS跨域

ゝ一纸荒年。 2022-02-03 13:49 320阅读 0赞

[https://www.jianshu.com/p/b6c40d8c9ad4][https_www.jianshu.com_p_b6c40d8c9ad4]（此篇博文有参照这个作者）

# **1.什么是跨域**  #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

# 2.常见跨域方式 #

1）JSONP

> JSONP是JSON with padding（填充式JSON或参数是JSON）的简写，是应用JSON的一种新方法，JSONP看起来和JSON差不多，只不过是被包含在函数调用的JSON，像这样：callback(\{name: 'nany'\})。

**百度的搜索就是用的这个原理，首先看一下**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

输入一个s然后打开网络

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

将这个地址复制打开并且保存

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

打开刚才的文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4][]

对照着看一下他的地址

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5][]

接下来我们自己写一个简单的例子理解一下jsonp

首先创建一个jsonp.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 6][]

jsonp.html

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 7][]

运行一下就会弹出miaov

接下来动态创建一下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 8][]

接下来我们动态创建jsonp.js的文件名

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 9][]

2）cors

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 10][]

[https://zhuanlan.zhihu.com/p/25778815][https_zhuanlan.zhihu.com_p_25778815]   看这篇有详细例子

这里看一下miaov的例子

前端

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 11][]

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    window.onload = function() {
    	
    	/*
    	在标准浏览器下，XMLHttpRequest对象已经是升级版本，支持了更多的特性，可以跨域了
    	但是，如果想实现跨域请求，还需要后端的相关配合才可以
    	
    	XMLHttpRequest : 增加很多功能，他也不推荐使用onreadystatechange这个事件来监听，推荐使用onload
    	
    	XDomainRequest : IE如果想实现跨域请求，则需要使用另外一个对象去实现
    	*/
    	var oBtn = document.getElementById('btn');
    	
    	oBtn.onclick = function() {
    		
    		/*var xhr = new XMLHttpRequest();
    		xhr.onreadystatechange = function() {
    			if (xhr.readyState == 4) {
    				if (xhr.status == 200) {
    					alert(xhr.responseText);
    				}
    			}
    		}
    		xhr.open('get', 'http://www.b.com/ajax.php', true);
    		xhr.send();*/
    		
    		var oXDomainRequest = new XDomainRequest();
    		oXDomainRequest.onload = function() {
    			alert(this.responseText);
    		}
    		oXDomainRequest.open('get', 'http://www.b.com/ajax.php', true);
    		oXDomainRequest.send();
    		
    	}
    	
    }
    </script>
    </head>
    
    <body>
    	<input type="button" value="获取同域下内容" id="btn" />
    </body>
    </html>

服务器端代码

<?php
    header('Access-Control-Allow-Origin:http://www.a.com');	//这是允许访问该资源的域
    echo 'hello';

这样就可以正常访问了

*  如何解决跨域的问题
 *  表单可以跨域吗（可以）
 *  对跨域的了解
 *  介绍下浏览器跨域
 *  怎么去解决跨域问题
 *  jsonp方案需要服务端怎么配合

在服务器端，需要对script的src进行url解析，将data作为参数放入回调函数中，最后通过res.end(callback(data))中将要执行的函数放入客户端的script中，在客户端对该函数进行执行。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 12][]

看下面例子

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 13][]

*  Ajax发生跨域要设置什么（前端）

> CORS  不需要设置，由后端设置

*  加上CORS之后从发起到请求正式成功的过程

对于简单请求

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 14][]

对于非简单请求

![20190509193304332.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 15][]

*   
 *  Access-Control-Allow-Origin在服务端哪里配置

> 使用headers属性

[https_www.jianshu.com_p_b6c40d8c9ad4]: https://www.jianshu.com/p/b6c40d8c9ad4
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220203/640b7a7a0d2a48a88dd6b4ec7a7c5966.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220203/a51e9e33a34944b6b87ad8429df38c1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220203/3d8c90635fa84639b16cd22de4970a2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220203/081cc3c735cf49618e8a6e8fb569681d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4]: /images/20220203/3bb80e5657b842d599e287691f36d403.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5]: /images/20220203/5e8b2b45e2d84c4fb7ce223e87f4d2f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 6]: /images/20220203/5c0675c39d7f4dad8863198da1fff725.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 7]: /images/20220203/0cabdb4c95834dc299629af040c32803.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 8]: /images/20220203/39d605ef41a9487b84e4c78de64140d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 9]: /images/20220203/9eb39389e52c4c2faf8cf2a65d42ac7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 10]: /images/20220203/25aa7e69f6274029b440ebbc980d32cf.png
[https_zhuanlan.zhihu.com_p_25778815]: https://zhuanlan.zhihu.com/p/25778815
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 11]: /images/20220203/173951d06e2b4684948f61628098a881.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 12]: /images/20220203/a9a94847564144e7a5ba9e09f76f45d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 13]: /images/20220203/db808849739c465a86371adc3f8188f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 14]: /images/20220203/f76f517f737649d18c11cd37e1cc8429.png
[20190509193304332.png]: /images/20220203/038beec6b73b4be2b19befe3221beb6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 15]: /images/20220203/6c9ee3ec79a142c98137e3ef1be132d6.png