如何优化 RESTful API 中的跨域请求？-JavaScript中文网-JavaScript教程资源分享门户

跨域请求是指浏览器从一个源（协议 + 域名 + 端口）向另一个源发起请求。由于安全原因，浏览器限制了跨域请求的访问，因此我们需要在 RESTful API 中进行跨域请求的优化，以提高用户体验和系统性能。

1. 什么是跨域请求？

跨域请求是指浏览器从一个源（协议 + 域名 + 端口）向另一个源发起请求。例如，浏览器从 http://example.com 发起请求到 http://api.example.com，就是跨域请求。

浏览器限制了跨域请求的访问，以保护用户的隐私和安全。如果没有跨域请求的限制，那么攻击者可以通过跨域请求获取用户的敏感信息，例如 cookie、密码等。

2. 跨域请求的限制

浏览器限制了跨域请求的访问，具体表现为：

XMLHttpRequest 和 Fetch API 不能跨域请求。
跨域请求时，只能发送 GET、HEAD、POST 请求，不能发送其他类型的请求。
跨域请求时，不能设置自定义的请求头，只能设置几个浏览器允许的请求头，例如：Accept、Accept-Language、Content-Language、Content-Type、DPR、Downlink、Save-Data、Viewport-Width、Width。

3. 跨域请求的解决方案

为了解决跨域请求的限制，我们可以采用以下几种方案：

3.1 JSONP

JSONP 是一种跨域请求的解决方案，它利用了 script 标签可以跨域请求的特性。具体实现步骤如下：

在客户端定义一个回调函数，例如：

function callback(data) {
  console.log(data);
}

发送一个 GET 请求，请求地址为服务器的 API 地址，同时在 URL 中传递一个参数 callback，例如：

const script = document.createElement('script');
script.src = 'http://api.example.com?callback=callback';
document.body.appendChild(script);

服务器返回一个 JavaScript 脚本，该脚本调用客户端定义的回调函数，并将数据作为参数传递给该函数，例如：

callback({name: 'Alice', age: 20});

JSONP 的优点是简单易用，但是存在一些缺点：

只支持 GET 请求，不能发送其他类型的请求。
安全性较差，容易受到 XSS 攻击。

3.2 CORS

CORS（Cross-Origin Resource Sharing）是一种跨域请求的解决方案，它通过在服务器端设置响应头（Access-Control-Allow-Origin）来允许跨域请求。具体实现步骤如下：

在服务器端设置响应头，允许跨域请求，例如：

Access-Control-Allow-Origin: *

在客户端发送跨域请求，例如：

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

CORS 的优点是安全性较好，但是存在一些缺点：

需要服务器端支持，需要在服务器端设置响应头。
不支持 IE8 和 IE9。

3.3 代理

代理是一种跨域请求的解决方案，它通过在服务器端设置代理来转发跨域请求。具体实现步骤如下：

在服务器端设置一个代理接口，例如：

app.get('/proxy', (req, res) => {
  const url = req.query.url;
  fetch(url)
    .then(response => response.json())
    .then(data => res.send(data))
    .catch(error => res.status(500).send(error));
});

在客户端发送请求到代理接口，例如：

fetch('/proxy?url=http://api.example.com')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

代理的优点是可以解决跨域请求的所有限制，但是存在一些缺点：

需要服务器端支持，需要在服务器端设置代理接口。
会增加服务器端的负担，需要处理额外的请求。

4. 总结

本文介绍了 RESTful API 中跨域请求的限制和解决方案，包括 JSONP、CORS 和代理。不同的解决方案适用于不同的场景，需要根据具体情况选择合适的方案。同时，我们也需要注意跨域请求的安全性，避免受到攻击。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658e8697eb4cecbf2d46978a