JSONP跨域访问浅谈

最近在接微信登录和支付，遇到了跨域访问的问题。研究了下，这里简单谈一下自己的一些心得

同源与跨域

所谓同源是指，域名，协议，端口相同。当任意一个不相同时，就是跨域。同源策略是限制浏览器的JS加载不同源的资源。

所谓跨域，就是访问非同源的资源。跨域问题就是浏览器只能访问同一个源的资源（文件，图片，页面，脚本等），非同源的资源，浏览器不能访问。要说明的是，如果不是通过浏览器来访问跨域的资源，那就不存在跨域的问题。

JSONP

JSONP可以用来解决跨域访问的问题。那么什么是JSONP？

JSONP(JSON with Padding)，J也叫填充式JSON，是应用JSON的一种新方法。是JSON的一种“使用模式”。我理解就是一种概念，简单说就是

回调函数（json数据参数）

以json数据作为参数，以一个回调函数来处理这个json参数，这种应用方式就称为JSONP

JSONP的原理

在介绍JSONP的原理前，先说一下JSONP的由来。

在面对跨域问题时，聪明的程序员们发现一个问题，也就是在页面的标签中（script，img等），其中的src属性，是可以指向一个外域的资源，不受同源策略的影响。那么如果动态构建了这样一段代码，就可以访问外域的资源了。

• 如果外域资源本身就是一个脚本，而我们只是想执行其中的代码，那么当用src加载这个js脚本的时候，就会自动执行其中的程序。
• 如果请求的外域资源是脚本执行后返回的结果，那么这个结果数据，JSONP要求是以JSON格式返回。因为我们一般是在script标签中来使用JSONP，那么这时src返回的结果，将会以javascript方式来处理，对于一段JSON数据，比如{“a”:1, “b”:”232f”}，显然js是会任务其语法错误的。那么如果我们构造一个字符串文本，其形式是”function({“a”:1, “b”:”232f”})”，这是我们就将返回数据从json格式字符串变化成了一段js代码，那么script标签就可以处理了。而这段变化后的字符串，也就是JSONP的引用，将json数据包裹在一个函数中。
• 前面说了，只要是src属性都不收跨域的限制，那么当然你可以使用img标签，但是这时就要按图片处理方式来处理返回结果了，所以没人这么用

JSONP的实现

既然src可以解决跨域问题，那么只要把对跨域资源的访问放在src中就可以了。但是，对于服务器端（接下来我们把请求跨域资源的称为客户端，相应请求的称为服务器端），根据原理可以知道，首先服务器端必须具有将返回数据转换称json数据的能力，还有具有构造“回调函数（json数据参数）”这样一段js代码的能力。

同时，因为这段js代码中的回调函数最终执行是在客户端，那么服务器端必须知道客户端的回调函数的具体函数名。这里，就存在一个客户端和服务器端约定的问题。因此JSONP的实现是必须有服务器端配合的。比如，客户端的处理函数是jsonhandler，那么服务器必须知道这个函数名，并构建出jsonhandler（｛”a”:1,”b”:”232f”｝）。

一般，都是有客户端在请求的时候，通知服务器端，自己的回调函数名，所以，我们看到JSONP的使用例子如下：

https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"

服务器会解析”callback”这个参数，来获得handleResponse这个处理函数，而callback就是客户端和服务器端约定的参数名

网上查资料的时候，我发现有的资料说“callback”可以自定义参数名称，也有的资料没有提到这点，就是以callback作为参数名，有点让人不明所以，我一开始还以为是协议约定。实际callback可以是任何名字，只要你和服务器端约定。

总结

目前，大部分的开放API，比如新浪，豆瓣，都支持跨域（否则我们就没法用了）。但不是所有的API都在文档上写名是否支持JSONP，或者说他们约定的参数名是什么（这几乎是世界性难题，程序员写文档都这么拽，想写的就写，不乐意的就省略，我也是这样^_^）。但一般都是支持JSONP的，约定的参数也是callback，所以我们不妨自己做个测试就知道了

参考了浅谈JSONP跨域请求 ，推荐大家阅读
详解js跨域问题