跨域请求是指浏览器从一个源（协议 + 域名 + 端口）向另一个源发起请求。由于安全原因，浏览器限制了跨域请求的访问，因此我们需要在 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 标签可以跨域请求的特性。具体实现步骤如下：
- 在客户端定义一个回调函数，例如：
-------- -------------- - ------------------ -
- 发送一个 GET 请求，请求地址为服务器的 API 地址，同时在 URL 中传递一个参数 callback，例如：
----- ------ - --------------------------------- ---------- - ------------------------------------------- ----------------------------------
- 服务器返回一个 JavaScript 脚本，该脚本调用客户端定义的回调函数，并将数据作为参数传递给该函数，例如：
--------------- -------- ---- -----
JSONP 的优点是简单易用，但是存在一些缺点：
- 只支持 GET 请求，不能发送其他类型的请求。
- 安全性较差，容易受到 XSS 攻击。
3.2 CORS
CORS（Cross-Origin Resource Sharing）是一种跨域请求的解决方案，它通过在服务器端设置响应头（Access-Control-Allow-Origin）来允许跨域请求。具体实现步骤如下：
- 在服务器端设置响应头，允许跨域请求，例如：
---------------------------- -
- 在客户端发送跨域请求，例如：
------------------------------- ------ -------- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
CORS 的优点是安全性较好，但是存在一些缺点：
- 需要服务器端支持，需要在服务器端设置响应头。
- 不支持 IE8 和 IE9。
3.3 代理
代理是一种跨域请求的解决方案，它通过在服务器端设置代理来转发跨域请求。具体实现步骤如下：
- 在服务器端设置一个代理接口，例如：
----------------- ----- ---- -- -
----- --- - --------------
----------
-------------- -- ----------------
---------- -- ---------------
------------ -- -----------------------------
---- 在客户端发送请求到代理接口，例如：
------------------------------------------ -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
代理的优点是可以解决跨域请求的所有限制，但是存在一些缺点：
- 需要服务器端支持，需要在服务器端设置代理接口。
- 会增加服务器端的负担，需要处理额外的请求。
4. 总结
本文介绍了 RESTful API 中跨域请求的限制和解决方案，包括 JSONP、CORS 和代理。不同的解决方案适用于不同的场景，需要根据具体情况选择合适的方案。同时，我们也需要注意跨域请求的安全性，避免受到攻击。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/658e8697eb4cecbf2d46978a