前端跨域使用jsonp处理方法示例

CORS，又称跨域资源共享，英文全称Cross-Origin Resource Sharing

AJAX跨域原因

• 浏览器限制：浏览器安全校验限制
• 跨域（协议、域名、端口任何一个不一样都会认为是跨域）
• XHR（XMLHttpRequest）请求

AJAX跨域问题解决思路

• 浏览器：浏览器取下跨域校验，实际价值不大
• XHR：不使用XHR，使用JSONP，有很多弊端，无法满足现在的开发要求
• 跨域：被调用方修改支持跨域调用（指定参数）；调用方修改隐藏跨域（基于代理）

假设我们想使用Ajax从a.com的页面上向b.com的页面上要点数据，通常情况由于同源策略，这种请求是不允许的，浏览器也会返回“源不匹配”的错误，所以就有了“跨域”这个说法。但是我们也有解决办法，我们可以再b.com的页面header信息中增加一行代码：

解决方案一（禁止浏览器检查）

　　　　禁止浏览器检查，启动浏览器时，添加参数禁止浏览器对ajax做检查

　　　　windows采用以下方式打开谷歌浏览器

"C:\Users\UserName\AppData\Local\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir
//不知道chrome.exe 地址的话
右键chrome图标-->属性-->如下图-->图中 目标 就是文件的位置了，直接复制出来即可

　　　　mac采用以下方式打开谷歌浏览器

//chrome 浏览器
open -a "Google Chrome" --args --disable-web-security  --user-data-dir
//safari 浏览器 
open -a '/Applications/Safari.app' --args --disable-web-security --user-data-dir 

输入地址：http://localhost:8080/test-ajax-cross/static/test.html#，进行访问，可以看到能正常完成ajax请求了

解决方案二，增加header头：

1	header("Access-Control-Allow-Origin: *");

如果需要限定指定的域可以访问的话 使用 

当我们设置的header为以上信息时，任意一个请求过来之后服务端我们都可以进行处理和响应，那么在调试工具中可以看到其头信息设置，其中见红框中有一项信息是“*Access-Control-Allow-Origin：* ”，表示我们已经启用CORS，如果要限制只允许某个域名的请求，可以这样：

1	header("Access-Control-Allow-Origin: //www.jb51.net");

解决方案三，使用jsonp的方式

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

　　　　JSONP的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来

　　当通过<script>元素调用数据时，响应内容必须用javascript函数名和圆括号包裹起来。而不是发送这样一段JSON数据，这就是JSONP中P的意义所在

　　　　在实践中，支持JSONP的服务不会强制指定客户端必须实现的回调函数名称，比如handleResponse。相反，它们使用査询参数的值，允许客户端指定一个函数名，然后使用函数名去填充响应。许多支持JSONP的服务都能分辨出这个参数名。另一个常见的参数名称是callback，为了让使用到的服务支持类似特殊的需求，就需要在代码上做一些修改了

　　　　JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据

在后端处理操作：

public function getToken()
{
    $token = session("jwttoken");
    if (empty($_GET['callback'])) {
        echo $token;
    } else if (isset($_GET['callback']) && is_string($_GET['callback'])) {
        return $_GET['callback'] . '(' . json_encode($token) . ')';
    }
}

前端使用方法：

$.ajax({

  type: "get",

  url: "http://demo.com/phpajax/getToken.php",

  dataType : "jsonp",

    jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)        jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名

  success: function(data) {

    console.log(data);

   //在此处就可以正常的获取到对应的返回值

  },

  error: function() {

  }

});

 

注意：JSONP的弊端

• 服务器需要改动代码支持
• 发送的不是XHR请求
• 只支持GET