总结解决跨域的三种方法

谁践踏了优雅 2022-03-07 02:22 243阅读 0赞

**方法1.通过PHP设置响应头允许跨域(CORS方式)**  
CORS（跨域资源共享,Cross-Origin Resource Sharing）定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应头即可  
header(“Access-Control-Allow-Origin:\*”); // 允许任何来源  
header(“Access-Control-Allow-Origin:[http://local.com][http_local.com]”); //只允许来自域名http://local.com的请求  
代码如下：  
local.com域名文件：  
![在这里插入图片描述][20190315232805134.png]  
[请求其他域名native.com][native.com]:  
![在这里插入图片描述][20190315232902239.png]  
请求的结果：成功  
![在这里插入图片描述][20190315233030436.png]  
**方法2.使用php做代理去请求第三方api接口**  
php是可以跨域的，我们利用ajax请求本域名中的php文件，php再去请求第三方接口文件，从而达到跨域目的。  
![在这里插入图片描述][20190315233320372.png]  
php做代理请求：  
![在这里插入图片描述][20190315233421609.png]  
ajax请求本域名php代理文件:  
![在这里插入图片描述][20190315233754435.png]  
请求结果：成功  
![在这里插入图片描述][2019031523391923.png]  
将数据取出：  
![在这里插入图片描述][20190315234053702.png]  
结果：  
![在这里插入图片描述][20190315234139906.png]  
**方法3.jsonp方法 只能get**  
浏览器只对XHR(XMLHttpRequest)请求有同源请求限制，而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制，利用这个“漏洞”就可以很好的解决跨域请求。JSONP就是利用了script标签无同源限制的特点来实现的，当向第三方站点请求时，我们可以将此请求放在<script>标签的src属性里这就如同我们请求一个普通的JS脚本：  
`<script src="http://www.abc.com/index.php/?param1=1&callback=fnName">` `</script>`

**JSONP实现跨域请求的原理简单的说，**  
就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。  
**JSONP 由两部分组成：**  
回调函数和数据。  
回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

本站并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。  
第三方网站产生的响应为json数据的包装（故称之为jsonp，即json padding），形如：  
callback(\{“name”:“fegnjie”,“age”:“18”\})，这样本站浏览器会调用callback函数，并传递解析后json对象作为参数。  
第1步:动态创建<script>标签，设置其src，回调函数在src中设置：  
![在这里插入图片描述][20190316000645133.png]  
第2步:在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来来操作数据。  
![在这里插入图片描述][20190316000827705.png]

了解了JSONP的基本使用方法，我们在实现上面通过ajax调用豆瓣接口的需求，实现代码如下：  
![在这里插入图片描述][20190316001156725.png]  
在控制台，我们可以查看到返回的response数据格式为JSON对象格式的，具体需要取出哪些参数，可以根据自己的需要：  
![在这里插入图片描述][20190316001247447.png]

[http_local.com]: http://local.com
[20190315232805134.png]: /images/20220307/e2410f5a62b7493f9e0bfc6ddc7e1b20.png?
[native.com]: http://xn--native-2u8i92ps0go3kgq2d7rxe.com
[20190315232902239.png]: /images/20220307/2bd066af2e794f2aa458217a6d75294e.png?
[20190315233030436.png]: /images/20220307/922fed6c513740a4936c6bb436ba7baf.png?
[20190315233320372.png]: /images/20220307/f901c3e0db394fe6a0695b4083d1f00c.png?
[20190315233421609.png]: /images/20220307/1f3417f8215e491ea46376c1b057779c.png
[20190315233754435.png]: /images/20220307/fea85bb75985407eba104c1d78488572.png?
[2019031523391923.png]: /images/20220307/56b9950dc5484f95ab523c9158706caf.png
[20190315234053702.png]: /images/20220307/1b0a7c0781ec495c831b929fda51e7c1.png?
[20190315234139906.png]: /images/20220307/42cc852c5e254867a2368c23025ee5af.png
[20190316000645133.png]: /images/20220307/e344c1807d9a4595b0f1a0a240b9e0b5.png
[20190316000827705.png]: /images/20220307/9969ffcae5d54a018b4483e826e6fdd1.png
[20190316001156725.png]: /images/20220307/f98a24c308374c6d83551654d7d1129e.png?
[20190316001247447.png]: /images/20220307/805879b03c644840aa67a91467ec9313.png?