jquery跨域请求示例分享(jquery发送ajax请求)

下面介绍一下jquery跨域请求的完整攻略。

背景知识

在 Web 开发过程中，由于同源策略的限制，不同域名之间的数据请求存在跨域问题，这时候我们需要使用 CORS 或者 JSONP 等技术实现跨域操作。

CORS 跨域请求

发送 CORS 跨域请求

CORS（Cross-Origin Resource Sharing）即跨域资源共享，是一种跨域请求的方式，在 HTTP 头部中添加特定的头信息以实现跨域请求。

例如，我们需要从 baidu.com 请求 data.baidu.com 上的数据，可以通过下面的代码进行：

$.ajax({
    url: 'http://data.baidu.com/api',
    type: 'GET',
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true,
    success: function(data) {
        console.log(data);
    }
});

其中，xhrFields: {withCredentials: true} 表示跨域请求时使用凭据（credentials），crossDomain: true 表示开启跨域请求。注意，开启了跨域请求，服务器需要设置允许跨域访问的响应头，否则会报错并拒绝数据返回。响应头通常设置为：

Access-Control-Allow-Origin: *

接收 CORS 跨域请求

接受跨域请求的服务端需要设置允许跨域访问的响应头，响应头中常见设置方法如下：

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");

其中，Access-Control-Allow-Origin 表示允许哪些域名进行跨域访问，* 表示允许所有域名进行跨域访问，也可以指定特定域名进行跨域访问。Access-Control-Allow-Methods 表示允许跨域访问的 HTTP 请求方法，Access-Control-Allow-Headers 表示允许请求头中携带的信息。需要注意的是，如果服务端设置了跨域请求，那么就必须同时设置以上三个响应头信息，否则前端请求会报跨域错误。

JSONP 跨域请求

发送 JSONP 跨域请求

JSONP（JSON with Padding）即带跨域回调的 JSON 数据，是一种轻量级的跨域请求方式。它通过在请求 URL 中添加一个回调函数名，来请求一个带有回调函数参数的 JSON 数据。

例如，我们需要从 data.baidu.com 请求数据，可以通过下面的代码进行：

<script type="text/javascript">
    function jsonp(json) {
        console.log(json);
    }
</script>
<script type="text/javascript" src="http://data.baidu.com/api?callback=jsonp"></script>

在请求数据时在 URL 中添加一个名为 callback 的参数，表示回调函数的名字。服务器会返回一个 JSON 对象，并执行回调函数，将 JSON 对象作为参数传入到回调函数中。

需要注意的是，服务器需要对请求进行处理，将请求参数添加到 JSON 对象中，并根据回调函数名包装成带回调函数的字符串返回，例如：

jsonp({name: "james", age: 22});

接收 JSONP 跨域请求

JSONP 跨域请求的服务端不必做任何特殊设置，只需要将处理好的 JSON 对象返回到客户端即可。客户端在接收到 JSON 数据后会自动执行回调函数。

示例

跨域方式：CORS

我们在开发过程中，需要从 example.com 请求 data.example.com 的数据，那么下面的设置可以实现 CORS 跨域请求：

$.ajax({
    url: 'http://data.example.com/api',
    type: 'GET',
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true,
    success: function(data) {
        console.log(data);
    }
});

服务器需要设置允许跨域访问的响应头，常见的设置如下：

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");

跨域方式：JSONP

我们在开发过程中，需要从 example.com 请求 data.example.com 的数据，那么下面的设置可以实现 JSONP 跨域请求：

<script type="text/javascript">
    function jsonp(json) {
        console.log(json);
    }
</script>
<script type="text/javascript" src="http://data.example.com/api?callback=jsonp"></script>

服务端需要将请求参数添加到 JSON 对象中，并根据回调函数名包装成带回调函数的字符串返回，例如：

jsonp({name: "james", age: 22});

可以看到，CORS 跨域和 JSONP 跨域方式的实现方式不同。在实际开发过程中，我们需要根据具体情况选择合适的方式进行跨域请求。