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

一. 同源策略

1. 什么是域（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。

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

2. 同源策略

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

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

二. jsonp方式的原理

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

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

1. 通过JS在页面中append如下标签

<script type="application/javascript" src="http://www.b.com/test?callback=parseResponse"></script>

增加该标签之后，浏览器就会立即去请求这个url，由于<script src="">方式是不受同源策略限制的，可以避免跨域限制

2. 服务端收到callback参数之后，将它拼接在返回的数据中，返回的数据如下：

parseResponse({"name":"hax","gender":"Male"});

3. 这样返回之后，就调用页面上的parseResponse js方法，就达到了数据处理的目的
4. 最后将刚刚新增加到页面中的<script>元素删除

三. 采用jsonp解决跨域问题

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

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

1. 前端

代码如下：

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");
        },
    });
}

以上各参数详解：

dataType可用值表：

注意：

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

2. 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之后，发现就正常了

参考资料

• W3school的《jQuery ajax - ajax() 方法》
• Rain Man的《JavaScript跨域总结与解决办法》
• 一条大河波浪宽的《ajax跨域请求原理及解决方案分析》
• 别天的《JSONP原理及实现跨域方式》