jquery中ajax处理跨域的三大方式

当使用jQuery进行Ajax请求时，如果请求的路径和当前页面的域名不一致，就会导致跨域问题。为了解决这个问题，jQuery提供了三种处理跨域请求的方式。下面分别介绍这三种方式的具体实现。

方式一：使用JSONP

如果服务端接口支持JSONP方式，那么可以直接通过jQuery的$.getJSON()方法来处理跨域请求。

JSONP原理是利用HTML script标签的跨域性来实现，通过在请求中添加一个callback参数，服务端会将返回数据包装在一个函数调用中，前端页面通过脚本接收并执行回调函数。

示例：

$.getJSON('http://www.example.com/jsonp', {callback: 'displayData'})
.done(function(data){
  console.log('Success:', data);
})
.fail(function(jqxhr, textStatus, error){
  console.log('Error:', error);
});

在上面的例子中，我们向http://www.example.com/jsonp发送一个JSONP请求，设置回调函数名为displayData，当请求成功时，done回调函数将打印获取到的数据，如果请求失败，则使用fail回调函数打印错误信息。

服务端返回数据格式应该是这样的：

displayData({'name':'张三', 'age':18})

方式二：代理跨域请求

利用一个同域的中间代理来处理跨域请求。前端页面通过Ajax请求本地服务器，本地服务器再发送真正的请求，然后将结果返回给前端页面。这种方式的缺点是增加服务器负担，同时代理服务器的访问速度影响到请求结果的速度。

示例：

假设存在以下前端Ajax请求，它要请求http://www.example.com/data，但是由于跨域问题，不能直接向该接口发送请求。这时可以通过一个代理服务器进行请求，代理服务器将请求转发到目标服务器，并将响应再返回给前端页面。

$.ajax({
  type: 'GET',
  url: 'http://localhost:8080/myproxy/data',
  dataType: 'JSON'
})
.done(function(data){
  console.log('Success:', data);
})
.fail(function(jqXHR, textStatus, errorThrown){
  console.log('Error:', errorThrown);
});

在本地运行的代理服务器代码如下所示：

const http = require('http');
const request = require('request');
const url = require('url');

const server = http.createServer(function(req, res){
  const query = url.parse(req.url, true).query;
  const options = {
    url: query.url,
    headers: {
      'User-Agent': 'request',
      'Referer': 'localhost'
    }
  };
  request(options, function(error, response, body){
    if(!error && response.statusCode == 200){
      res.write(body);
    }
    else{
      console.log('Error:', error);
    }
    res.end();
  });
});

server.listen(8080);

上面的代码创建一个本地HTTP服务器，当请求地址为http://localhost:8080/myproxy/data?url=xxx时，代理服务器将请求指向xxx参数指定的目标服务器地址。

方式三：CORS

使用CORS（跨域资源共享）方式，通过在服务端添加一些HTTP头信息来允许客户端跨域访问服务端。

在服务端中添加如下代码：

// 允许任何来源跨域访问
header('Access-Control-Allow-Origin: *');
// 允许的HTTP请求方法
header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE');
// 允许的HTTP请求头信息
header('Access-Control-Allow-Headers: Content-Type');

示例：

假设存在以下前端Ajax请求，它要请求http://www.example.com/data，可以在服务端添加如上代码来允许跨域请求。

$.ajax({
  type: 'GET',
  url: 'http://www.example.com/data',
  dataType: 'JSON'
})
.done(function(data){
  console.log('Success:', data);
})
.fail(function(jqXHR, textStatus, errorThrown){
  console.log('Error:', errorThrown);
});