Ajax跨域请求指南：告别限制，畅游数据世界

2023-02-01 10:01:24

跨域请求：跨越藩篱，畅游数据世界

跨域的本质

何谓跨域？跨域，是指浏览器限制一个域名下的网页通过 Ajax 请求另一个域名下的资源。同源策略（Same Origin Policy）是浏览器为了保护用户安全而制定的限制措施，它规定一个源（即域名、协议和端口）的脚本只能与该源下的其他资源进行数据交互。

当您尝试从源 A 向源 B 发出 Ajax 请求时，浏览器会基于同源策略而阻止该请求，从而引发跨域错误。这主要出于以下安全考虑：

确保脚本只能访问来自同一源的数据，防止恶意脚本窃取敏感信息。
保护用户免受跨站脚本攻击（XSS），防止恶意脚本注入到其他网站中。

跨域解决方案纵览

既然跨域如此棘手，我们又该如何应对呢？别担心，Web 开发人员们早已研发出多种跨域解决方案，为您扫清障碍，一扫烦忧。

1. JSONP：跨域请求的捷径

JSONP（JSON with Padding）是一种简单有效的跨域解决方案，它利用了<script>标签无视同源策略的特性，巧妙地绕过了浏览器的限制。

JSONP 的工作原理如下：

客户端（源 A）动态创建一个<script>标签，并将其src属性指向服务器（源 B）提供的 JSONP 端点。
源 B 将返回一个包含数据和回调函数的 JSONP 响应。
客户端的<script>标签加载并执行 JSONP 响应中的代码，从而调用回调函数并将数据传递给客户端。

这种方法的优点在于它易于实现，并且不需要服务器端做出任何改动。然而，它也有一些局限性：

只能用于 GET 请求，无法发送 POST 请求或其他类型的请求。
可能存在安全风险，因为客户端需要执行来自第三方的代码。

2. CORS：跨域请求的标准解决方案

CORS（Cross-Origin Resource Sharing）是 W3C 制定的一套跨域资源共享标准，它为跨域请求提供了更加规范和安全的解决方案。

CORS 的工作原理如下：

客户端（源 A）向服务器（源 B）发送预检请求（OPTIONS 请求）。
服务器（源 B）在预检请求中返回 CORS 响应头，指定哪些源可以访问该资源以及允许哪些请求方法。
客户端（源 A）收到 CORS 响应头后，再发送实际的请求。
服务器（源 B）在实际请求中返回 CORS 响应头和请求的数据。

CORS 是一种安全且灵活的跨域解决方案，它支持各种类型的请求方法和头部，并且允许服务器端对跨域请求进行细粒度的控制。

3. Proxy：跨域请求的代理人

Proxy（代理）是一种间接请求资源的方法，它通过一个中间服务器（代理服务器）来转发请求，从而绕过同源策略的限制。

Proxy 的工作原理如下：

客户端（源 A）向代理服务器（源 C）发送请求。
代理服务器（源 C）向目标服务器（源 B）发送请求。
目标服务器（源 B）将响应返回给代理服务器（源 C）。
代理服务器（源 C）将响应转发给客户端（源 A）。

Proxy 是一种简单且有效的跨域解决方案，它支持各种类型的请求方法和头部，并且可以与任何服务器端技术配合使用。然而，它可能会带来额外的延迟和性能开销。

代码示例

JSONP

客户端（源 A）：

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

服务器端（源 B）：

// PHP 示例
$data = array('foo' => 'bar');
echo json_encode($data);

// Node.js 示例
const express = require('express');
const app = express();

app.get('/jsonp', (req, res) => {
  const data = { foo: 'bar' };
  res.jsonp(data);
});

app.listen(3000);

CORS

客户端（源 A）：

const request = new XMLHttpRequest();
request.open('GET', 'https://example.com/cors');
request.setRequestHeader('Access-Control-Allow-Origin', '*');
request.onload = function() {
  console.log(request.responseText);
};
request.send();

服务器端（源 B）：

// PHP 示例
header('Access-Control-Allow-Origin: *');
echo 'Hello world!';

// Node.js 示例
const express = require('express');
const app = express();

app.get('/cors', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.send('Hello world!');
});

app.listen(3000);

Proxy

客户端（源 A）：

const proxyUrl = 'https://example.com/proxy';
const request = new XMLHttpRequest();
request.open('GET', proxyUrl + '?url=https://example.com/target');
request.onload = function() {
  console.log(request.responseText);
};
request.send();

服务器端（源 C）：

// PHP 示例
$url = $_GET['url'];
$data = file_get_contents($url);
echo $data;

// Node.js 示例
const express = require('express');
const app = express();

app.get('/proxy', (req, res) => {
  const url = req.query.url;
  const request = require('request');

  request(url, (error, response, body) => {
    if (error) {
      res.status(500).send(error.message);
    } else {
      res.send(body);
    }
  });
});

app.listen(3000);