在 RESTful API 中使用 CORS 解决跨域问题-JavaScript中文网-JavaScript教程资源分享门户

什么是跨域问题？

跨域问题是指当一个请求从一个域名（网站）发出，而该请求的目标资源来自另一个域名时，就会出现跨域问题。这是由于浏览器的同源策略所导致的。

同源策略是浏览器的一种安全策略，它限制了一个脚本只能访问与它所在网页的同源资源。同源指的是协议、域名和端口号都相同。

在前端开发中，跨域问题是非常常见的问题。例如，当我们的前端应用需要从另一个域名下的 RESTful API 获取数据时，就会出现跨域问题。

什么是 CORS？

CORS（Cross-Origin Resource Sharing）是一种机制，它允许 Web 应用服务器进行跨域访问控制。它是 W3C 标准，目前所有浏览器都支持该标准。

CORS 通过 HTTP 头来告诉浏览器，哪些源可以访问当前页面的资源。源是指协议、域名和端口号。

如何使用 CORS 解决跨域问题？

在 RESTful API 中使用 CORS 解决跨域问题非常简单，只需要在 API 的响应头中添加一些特定的 HTTP 头即可。

以下是一些常用的 HTTP 头：

Access-Control-Allow-Origin：指定允许访问的源，可以是一个具体的域名，也可以是 *，表示允许任意域名访问。
Access-Control-Allow-Methods：指定允许的 HTTP 方法。
Access-Control-Allow-Headers：指定允许的 HTTP 头。
Access-Control-Allow-Credentials：指定是否允许发送 Cookie。
Access-Control-Max-Age：指定预检请求的有效期，单位为秒。

以下是一个使用 Node.js 和 Express 框架编写的 RESTful API 示例：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  res.set('Access-Control-Allow-Methods', 'GET, POST');
  res.set('Access-Control-Allow-Headers', 'Content-Type');
  res.set('Access-Control-Allow-Credentials', 'true');
  res.set('Access-Control-Max-Age', '3600');
  
  // 处理请求并返回数据
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在上面的示例中，我们使用了 Express 的 res.set 方法来设置响应头。我们指定了允许任意域名访问，允许 GET 和 POST 方法，允许发送 Content-Type 头，允许发送 Cookie，预检请求的有效期为 3600 秒。

总结

在 RESTful API 中使用 CORS 解决跨域问题非常简单，只需要在 API 的响应头中添加一些特定的 HTTP 头即可。但是，我们需要注意安全性，不能允许任意域名访问 API，需要限制允许访问的域名。同时，我们也需要注意预检请求的有效期，不能设置过长，否则会增加服务器的负担。

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