当我们使用前端调用 RESTful API 时，经常会遇到跨域这个问题。这是因为浏览器出于安全原因，限制了同源策略，不允许网页访问不属于自己域下的资源。本文就来讲解如何解决这个问题。
什么是跨域？
在 Web 开发中，域名（或 IP）+ 端口 + 协议（http/https）共同组成网站地址，如果两个网站地址的域名（或 IP）+ 端口 + 协议 （http/https）中有任何一个不同，就被认为是跨域。例如，www.a.com 这个网站地址和 www.b.com 就是跨域的。
解决跨域问题的方式
下面介绍几种解决跨域问题的方式。
JSONP（JSON with Padding）
JSONP 是一种前端技术，它允许页面从一个不同的域名（跨域）获取数据。JSONP 的原理是，在服务端，JSON 数据被包裹在一个函数调用中返回到页面，浏览器将函数名与返回数据一起传递给客户端的回调函数中。
在前端，使用以下方式进行 JSONP 请求：
function jsonp(url, callback) {
const script = document.createElement("script");
script.src = url + "&callback=" + callback;
document.body.appendChild(script);
}
jsonp("http://example.com/api?param1=value1", "callback");服务端返回的数据如下：
callback({
"name": "John",
"age": 30,
"city": "New York"
});这段数据会传到页面上调用 callback 函数。
CORS（Cross-Origin Resource Sharing）
CORS 是 W3C 标准，它是一种允许浏览器向跨域服务器发出 XMLHttpRequest 请求的机制。在服务端，通过设置 Access-Control-Allow-Origin 头部，允许某个指定的域名可以跨域访问它的资源。
以下是使用 CORS 的示例代码：
服务端的 Response Header：
Access-Control-Allow-Origin: *
前端的请求代码：
fetch("http://example.com/api")
.then(response => response.json())
.then(data => console.log("data", data));代理
在某些情况下，我们可以使用代理服务器来避免跨域。代理服务器就是让前端的请求先发送到自己的服务器上，再由自己的服务器转发到真正的目标服务器上，最后再将目标服务器的响应返回给前端。
以下是使用代理的示例代码：
前端的请求代码：
fetch("http://localhost:3000/api")
.then(response => response.json())
.then(data => console.log("data", data));代理服务器的代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - ------------------- ----- --- - ---------- --------------- ----- ---- -- - -------------------------------------------- --- ---------------- -- -- - ------------------ ------ -- ------- -- ---- ------- ---
总结
以上三种方式都可以解决 RESTful API 中的跨域问题。它们各有优缺点，具体使用应根据项目场景选择合适的方式。在实际项目中，CORS 和代理的方式更为常用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645a224d968c7c53b0c43bf3