| Ajax, Javascript

两种常见跨域方式

Ajax不能跨域，比如您是www.baidu.com，您就不能请求www.163.com的文件。但您可以请求www.baidu.com/1.json、ent.baidu.com/1.json。这是浏览器的安全策略导致的，XHR类型的请求，如果来自其他的服务器，将不予应答。

一、使用jsonp

JSONP是JSON with Padding的略称。它是一个非官方的协议，出处不可考，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。–来源百度

SONP就像是JSON+Padding一样(Padding这里我们理解为调用函数时的填充)。

image

绿色部分是JSON，外面的fun();是函数的调用，是padding补充部分。

jsonp的原理很简单，就是把定义写在了HTML源文件里面，而将调用放在script标签引用的文件里面，由于script标签可以跨文件使用，这样就实现了跨域，引用的文件可以有各种格式php 、js、txt等。

下面举个例子：

1
2
3
4
5
6
7
8
<script type="text/javascript">
  // 定义函数
  function fun (obj) {
    alert(obj.result[1].name)
  }
</script>
<!-- 引入数据 -->
<srcipt type="text/javascript" src="xxx/jsonp.txt"></script>

jsonp.txt里面的内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//调用函数
fun({
    "result" : [
        {
            "name" : "小明",
            "age" : 12,
            "sex" : "男"
        },
        {
            "name" : "小红",
            "age" : 13,
            "sex" : "女"
        },
        {
            "name" : "小绿",
            "age" : 16,
            "sex" : "女"
        }
    ]
});

运行结果：

image

由于这样使用起来不方便，我们可以将它封装成一个实用轮子：

image

jQuery已经有封装好的API可以直接使用：名称是ajax（）
可以查看jQuery手册，参考如下

image

二、CORS

利用 CORS，http://www.test2.com只需在响应中添加一个标头，就可以允许来自http://www.test1.com的请求：

1
2
// *号表示允许任何域向我们的服务端提交请求
Access-Control-Allow-Origin: *

也可以设置指定的域名，如域名http://www.test2.com，那么就允许来自这个域名的请求：

1
2
// *号表示允许任何域向我们的服务端提交请求
Access-Control-Allow-Origin: http://www.test2.com

当前我设置的header为“”，任意一个请求过来之后服务端我们都可以进行处理&响应，那么在调试工具中可以看到其头信息设置，其中见红框中有一项信息是“Access-Control-Allow-Origin： ”，表示我们已经启用CORS，如下图。

image

简单的一个header设置，一个支持跨域&POST请求的server就完成了

当然，如果没有开启CORS必定失败的啦，如下图：

image