使用 CORS 解决 RESTful API 跨域问题

什么是跨域问题

在浏览器中，由于安全限制，JavaScript 只能访问与当前页面同域名、同端口、同协议的资源，这就是跨域问题。例如，在 http://example.com 中的 JavaScript 代码无法直接访问 http://api.example.com 中的 API。

跨域解决方案

目前，解决跨域问题的方法有以下几种：

1. JSONP：通过动态创建 script 标签，将数据作为回调函数的参数传递到前端页面中。
2. 代理服务器：在同一域名下，通过服务器中转将数据传递到前端页面中。
3. CORS：跨域资源共享，服务端设置 Access-Control-Allow-Origin 头部，允许指定的域名访问资源。

其中，CORS 是最常用的跨域解决方案，也是官方推荐的方案。

如何使用 CORS

在服务端设置 Access-Control-Allow-Origin 头部，允许指定的域名访问资源。例如，下面的代码设置允许所有域名访问资源：

// Node.js
app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  next();
});

其中，Access-Control-Allow-Origin 指定允许访问的域名，* 表示任意域名都可以访问；Access-Control-Allow-Methods 指定允许的 HTTP 方法；Access-Control-Allow-Headers 指定允许的 HTTP 头部。

在前端代码中，可以通过以下方式发送跨域请求：

-- -------------------- ---- -------
------------------------------------ -
  ------- ------
  ----- -------
  ------------ ----------
  -------- -
    --------------- -------------------
    ---------------- ------- - - -----
  -
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------

其中，mode: 'cors' 表示使用 CORS 方式发送请求；credentials: 'include' 表示携带 cookie；headers 中指定请求头部。

注意事项

使用 CORS 时需要注意以下几点：

1. 服务端需要设置 Access-Control-Allow-Origin 头部，允许指定的域名访问资源。
2. 在前端代码中，需要使用 mode: 'cors' 和 credentials: 'include'。
3. 如果需要携带 cookie，需要设置 Access-Control-Allow-Credentials 头部为 true。
4. 如果请求中包含非简单请求头部，浏览器会先发送一个 OPTIONS 请求，确认服务器是否允许跨域请求。

总结

CORS 是目前最常用的跨域解决方案，它可以让我们方便地访问不同域名下的资源。在使用 CORS 时，需要注意服务端和前端代码的设置，避免出现跨域问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6618c949d10417a2229219e4