JSONP 、跨域资源共享 CORS

追影的React开发者

已于 2022-05-31 14:55:15 修改

阅读量199

点赞数 1

分类专栏： js 文章标签： javascript ajax 前端

于 2018-04-19 17:15:00 首次发布

本文链接：https://blog.csdn.net/qq_36658051/article/details/82456612

版权

js 专栏收录该内容

83 篇文章 1 订阅

订阅专栏

http://www.ruanyifeng.com/blog/2016/04/cors.html
在进行网站开发的过程中经常会用到第三方的数据，但是由于同源策略的限制导致ajax不能发送请求，因此也无法获得数据。解决ajax的跨域问题有两种方法：

一、jsop 　
二、XMLHttpRequest2中可以配合服务端来解决，在响应头中加入Access-Control-Allow-Origin:*

1、同源：

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口号完全相同
　　1.1目的：保护用户信息安全
　　1.2限制：cookie、localStorage和IndexDB无法读取
　　无法操作跨域的iframe里的dom元素
　　ajax请求不能发送

2、跨域：

不同源则为跨域

1      http://api.example.com/detail.html         不同源    域名不同 
2      https//www.example.com/detail.html         不同源    协议不同 
3      http://www.example.com:8080/detail.html    不同源    端口不同 
4      http://www.example.com/detail/index.html   同源      只是目录不同

3、jsonp原理：

其本质是利用了标签具有可跨域的特性，由服务端返回预先定义好的javascript函数的调用，并且将服务端数据以该函数参数的形式传递过来。

<script>
 function fuc(data){
    console.log(data.name);
 }     
</script>
<script src="http://www.baidu.com/api.php?callback=fuc"></script>

4、后台代码

<?php 
     $cb = $_GET['callback'];
     $data = array(
         'name'=> 'zs',
         'age'=>18,
         'gender'=>true
     );
     echo $cb.'('.json_encode($data).')';
?>

5、CORS

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
与JSONP的比较
CORS与JSONP的使用目的相同，但是比JSONP更强大。
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。