ajax和jsonp跨域的原理本质详解

针对“Ajax和JSONP跨域的原理本质”这一话题，我准备了以下的完整攻略。

一、同源策略

同源策略，是一种安全策略，它限制了一个源（域名、协议、端口）下的文档或脚本如何能与另一个源（域名、协议、端口）下的资源进行交互。

二、JSONP 跨域

JSONP是一种跨域的技术手段，发起JSONP请求时，服务器端返回指定格式的数据，并在响应中将需要返回的数据作为参数来执行跨域请求的回调函数。

JSONP的原理：

1.客户端定义一个回调函数，回调函数名称在请求参数中传递给服务器端。

2.服务器端在响应数据中调用该回调函数并将需要返回的数据作为参数带上。

3.客户端接收到响应数据后，执行回调函数，从而完成跨域请求。

JSONP示例：

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url + '?callback=' + callback;
  document.body.appendChild(script);
}

jsonp('https://www.example.com/api/data', 'handleData');
function handleData(data) {
  // 进行处理
}

在这个例子中，我们使用了 jsonp 函数来发送跨域请求，请求地址是 https://www.example.com/api/data，同时我们将一个名为 handleData 的回调函数作为参数传送到服务器端。

服务器端接收到该请求后，在返回的响应数据中会调用 handleData 函数并将需要返回的数据作为参数带上。客户端接收到响应后，就会自动执行回调函数 handleData，并传入服务器返回的数据，从而完成跨域请求。

三、Ajax 跨域

在跨域请求中，使用 Ajax 请求会遇到同源策略的限制。但是可以使用 CORS 和代理服务器两种方式来实现 Ajax 跨域。

3.1 CORS

CORS是一种标准的跨域解决方案，在服务端设置相关的响应头可以实现跨域请求。对于跨域的 Ajax 请求，需要在服务器端设置 Access-Control-Allow-Origin 头，来允许来自指定源的请求通过。

CORS示例：

客户端代码：

fetch('https://www.example.com/api/data', {
  method: 'GET',
  mode: 'cors'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

服务端代码：

app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});

在这个例子中，我们使用 fetch 函数发送跨域请求，请求地址是 https://www.example.com/api/data，同时在 fetch 函数中设置了请求的模式 mode: 'cors'。

服务器端在响应数据中设置了 Access-Control-Allow-Origin 头，来允许来自任意源的请求通过。客户端接收到响应后，就可以使用 response.json() 来读取响应数据。

3.2 代理服务器

代理服务器方式是指在同一个域名下设置一个代理服务器，使得客户端可以通过该代理服务器向其他不同的域名发送请求。通过代理服务器来发送请求，而不是直接从客户端发送跨域请求，就能够避免同源策略的限制。

代理服务器示例：

客户端代码：

fetch('/proxy', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    url: 'https://www.example.com/api/data',
    method: 'GET',
    mode: 'cors'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

服务端代码：

app.post('/proxy', function(req, res) {
  const options = {
    url: req.body.url,
    method: req.body.method,
    headers: {
      'Content-Type': 'application/json'
    },
    body: req.body.mode === 'cors' ? null : req.body.body
  };
  request(options, function(error, response, body) {
    if (error) {
      res.send(error);
      return;
    }
    res.send(body);
  });
});

在这个例子中，我们通过 /proxy 来向代理服务器发送请求，在请求参数中添加了需要请求的地址 https://www.example.com/api/data和请求方法 GET，代理服务器将该请求以代理方式发送出去，获取到数据后再返回给客户端。在实际开发中，代理服务器不仅可以用 request 模块实现，也可以用其他的模块或自己实现。

四、总结

通过本文我们了解了同源策略、JSONP 跨域和 Ajax 跨域这三个方面的内容，同时给出了这三个方面的示例，希望能够帮助你更好地理解这些跨域技术的原理。