跨域请求解决方法——jsonp

Javascript出于安全方面的考虑，不允许跨域调用其他页面的对象，但这样却给平时的开发带来了不少麻烦，这里把涉及到跨域的问题进行了简单地整理。

同源策略

什么是域（origin）

域是由三部分组成：URI Schema（协议类型）、host name（域名）、port number（端口号），举个例子：

http://www.a.com这个页面，URI Schema是http，host name是www.a.com，port number是默认的80；
https://www.b.com:8080/test/这个页面，URI Schema是https，host name是www.b.com，port number是8080。

上面两个页面的三个部分全部不相同，所以它们就是不同的域。下面表格可以更好地看出什么是同域：

URL	说明	是否允许通信
`http://www.a.com/a.js` `http://www.a.com/b.js`	同一域名下	允许
`http://www.a.com/lab/a.js` `http://www.a.com/script/b.js`	同一域名下不同文件夹	允许
`http://www.a.com:8000/a.js` `http://www.a.com/b.js`	同一域名，不同端口	不允许
`http://www.a.com/a.js` `https://www.a.com/b.js`	同一域名，不同协议	不允许
`http://www.a.com/a.js` `http://70.32.92.74/b.js`	域名和域名对应ip	不允许
`http://www.a.com/a.js` `http://script.a.com/b.js`	主域相同，子域不同	不允许
`http://www.a.com/a.js` `http://a.com/b.js`	同一域名，不同二级域名（同上）	不允许
`http://www.b.com/a.js` `http://www.a.com/b.js`	不同域名	不允许

同源策略

它限制了某个域下的文档或者js与另一个域中的资源交互的方式，它提供了一种安全机制，这种安全机制可以避免来自恶意网站的攻击。同源策略要求浏览器允许来自某个网页上的js请求来自另一个网页的数据，当且仅当两个页面来自相同的域。

通过同源策略可以阻止来自恶意网站的脚本通过其他网站的DOM获取其他网站的信息。可以避免CSRF和XSS攻击。

同源策略限制的是浏览器或者其他提供类似浏览器服务的软件，这只是一个规范，所以浏览器是否遵守这个规范也不一定，所以IE浏览器判断同源的时候就不必考虑端口号；
同源策略限制的js，而图片、css这些事不存在同源策略限制的

jsonp方式的原理

浏览器的同源策略把跨域请求都禁止了
HTML的<script>标签是例外，可以突破同源策略从其他来源获取数据
我们可以通过<script>标签引入jsonp文件，然后通过一系列JS操作获取数据

实现方法：通过页面中增加一个<script>标签，标签的src指向的是另外一个域的能够提供数据的url，同时将一个本地的callback方法传给服务端，服务端返回的时候将会自动指向callback方法。

通过JS在页面中append如下标签
1
<script type="application/javascript" src="http://www.b.com/test?callback=parseResponse"></script>
增加该标签之后，浏览器就会立即去请求这个url，由于<script src="">方式是不受同源策略限制的，可以避免跨域限制。
服务端收到callback参数之后，将它拼接在返回的数据中，返回的数据如下：
1
parseResponse({"name":"hax", "gender":"Male"});
这样返回之后，就调用页面上的parseResponse方法，就达到了数据处理的目的。
最后将刚刚新增加到页面中的<script>元素删除。

采用jsonp解决跨域问题

由于本人技术水平有限，也在网上找了许多方案，但是大多没有成功（主要自己太菜了），最后结合了多个博客的讲解以及尝试，最后使用jsonp成功解决了自己遇到的问题，不过写这篇博客距离当时解决所隔时间太长，无法列出当时帮助到自己的大神们，求谅解。

由于后台采用了Django，故后台使用Python进行演示，其他的后台框架仿照完成即可。

前端

代码如下：

function submitComment(url) {
    $.ajax({
        type: 'GET',
        url: url,
        data: $("#forml").serialize(),
        crossDomain: true,
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'callback',
        success: function(response){
            console.log(response);
        },
        error: function(){
            console.log('Ajax error!');
        },
        complete: function() {
            console.log("complete");
        },
    });
}

以上各参数详解：

参数名	参数类型	默认值	解析
type	String	‘GET’	请求方式(‘POST’或’GET’)，其他HTTP请求方法，如PUT和DELETE也可使用，但是仅部分浏览器支持
url	String	当前页地址	发送请求地址
data	String		发送服务器的数据。将自动转换为请求字符串格式，其他详细解析课件w3school
crossDomain	Boolean	同域请求为false，跨域请求为true	若想在同一域内强制跨域请求(如jsonp形式)，例如，想让服务器重定向到另一个域，则需要将其设置为true
dataType	String		预期服务器返回的数据类型，详细可用值见下表
jsonp	String		在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=？"这种GET或POST请求中的URL参数里的callback部分
jsonpCallback	String	jQuery自动生成的随机函数名	为jsonp请求指定回调函数名，用来取代自动生成的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理
success	Function		请求成功后的回调函数。有服务器返回，并根据dataType参数进行处理后的数据
error	Function		请求失败时调用此函数，具体可见w3school
complete	Function		请求完成后的回调函数(请求成功与失败都调用)，具体可见w3school

dataType可用值表：

可用值	解析
xml	返回XML文档，可用jQuery处理
html	返回纯文本HTML信息
script	返回纯文本JavaScript代码，不会自动缓存结果
json	返回json数据
jsonp	jsonp格式数据。使用JSONP形式调用函数时，如"myurl?callback=?"jQuery将自动替换?为正确的函数名，以执行回调函数
text	返回纯文本字符串

注意：

由于采用跨域请求，不管我们如何设置type参数，请求方式一定为GET
开始调试时，每次在控制台都可以看到response，但是success的function就是没有调用，每次都是调用了error和complete的function，后来网上一直查，最终发现后台也需要相应的配合
由于不太明白jsonp与jsonpCallback参数的用法，所以直接将两个参数值赋一样的值

Django后台

代码如下：

def get_shop_comment(request):
    # 以下是一些从请求中取出参数的操作
    省略......
    try:
        result = dict()
        result["returnInfo"] = 1
        comment_list = list()
        # 以下代码是将数据库的操作，查到后append到comment_list里
        省略......
        result["data"] = comment_list
        return_result = json.dumps(result)
        data = '%s(%s);' % ('callback', return_result)
        return HttpResponse(data, 'text/javascript')
    except Exception as e:
        data = '%s(%s);' % ('callback', {'result': e.message})
        return HttpResponse(data, 'text/javascript')

注意：

跨域请求方式都是GET
返回一定要用HttpResponse，不能使用JsonResponse
开始当只有返回一个参数时，并没用使用json.dumps()方法，前台可以正常调用success的方法。后来当有多个参数时，前台就一直调用error和complete的方法，后来自己尝试使用了dumps之后，发现就正常了

同源策略

什么是域（origin）

同源策略

jsonp方式的原理

采用jsonp解决跨域问题

前端

Django后台

参考资料