什么是跨域？
跨域指的是在当前页面的域名、协议或端口与请求资源的地址不一致时，浏览器会限制页面发起的跨域请求。这是出于安全性考虑而做出的限制。
例如，当一个网站 www.example.com 在页面中使用 Ajax 发起一个请求到 api.example.com，由于两个域名不同，将触发浏览器的跨域限制。
解决跨域问题的方式
JSONP
JSONP（JSON with Padding）是一种跨域解决方案，它利用了标签的 src 属性没有跨域限制的特点来实现跨域请求。JSONP 请求会创建一个 script 标签，并在其中设置 src 属性为目标 API 的地址，同时在 URL 中加入回调函数名称，服务器返回一个以该名称为函数名包裹的 JSON 数据。这样，由于 script 标签没有跨域限制，因此可以成功获取数据。
示例代码：
-- -------------------- ---- ------- -------- ---------- --------- - ----- ------ - --------------------------------- ---------- - --- - ------------ - --------- ---------------------------------- - -- -- ----- -- ------------------------------------------------------------ ------------------ -- --------- -------- -------------------- - ------------------ -
CORS
CORS（Cross-Origin Resource Sharing）是一种更加安全的跨域解决方案，它允许服务器在响应中设置一些头部信息，告诉浏览器当前请求是允许的。需要注意的是，CORS 只能用于现代浏览器。
服务器端需要在响应头中添加如下信息：
Access-Control-Allow-Origin: *
其中 * 表示任何域名都可以访问该 API，也可以指定特定的域名。
示例代码：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com');
xhr.withCredentials = true; // 如果需要携带凭证，需要将此属性设置为 true
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send();代理
代理是另一种跨域解决方案，它的原理是在本地设置一个代理服务器，将所有请求发送到代理服务器上，再由代理服务器发起真正的请求并返回响应结果。这样，由于代理服务器与目标 API 的域名相同，因此不会触发跨域限制。
示例代码：
-- -------------------- ---- ------- -- ------- ----- ------- - ------------------- ----- ------- - ------------------- ----- --- - ---------- ----------------- ----- ---- -- - ----- --- - -------------- --------------------------- --- ----------------- -- ---- ---------------------------------------------------------------- -------------- -- ---------------- ---------- -- -------------------
总结
以上是跨域问题的三种解决方案，每种方案都有各自的优缺点。在实际开发中，需要根据具体情况选择最适合的方式来解决跨域问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25180