以角度添加 CORS - JavaScript

介绍

跨域资源共享（Cross-Origin Resource Sharing, CORS）是一种浏览器机制，用于解决前端JavaScript发起跨域请求的安全性问题。在默认情况下，浏览器不允许通过XMLHttpRequest或Fetch API向不同域名的服务器发送请求。CORS提供了一种机制，允许服务器决定是否允许来自特定域的请求。

在JavaScript中，可以通过设置HTTP请求头以及处理服务器响应头的方式来使用CORS。

启用CORS

在JavaScript中，要启用CORS，首先需要设置HTTP请求的Origin头，这个头字段指示了请求的来源域名。例如，如果你的应用部署在http://localhost:3000上，你需要将Origin头设置为http://localhost:3000。

const url = 'http://api.example.com/data';
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('Origin', 'http://localhost:3000');
xhr.send();

处理CORS响应

在服务器端，你需要返回适当的HTTP响应头来允许特定域的请求。常见的HTTP响应头包括Access-Control-Allow-Origin和Access-Control-Allow-Methods。

Access-Control-Allow-Origin指定了允许跨域请求的域名。你可以设置为*表示允许来自所有域的请求，或者设置为特定的域名。

Access-Control-Allow-Methods指定了允许的HTTP请求方法，例如GET、POST、PUT等。在设置这个头字段时，确保只包含你的服务器实际支持的方法。

// 假设请求的方法为GET，返回的数据为JSON格式
const allowedOrigins = ['http://localhost:3000', 'http://example.com'];
const allowedMethods = ['GET', 'POST'];

// 处理跨域请求
function handleCORS(req, res) {
  const requestOrigin = req.headers.origin;
  
  if (allowedOrigins.includes(requestOrigin)) {
    res.setHeader('Access-Control-Allow-Origin', requestOrigin);
    res.setHeader('Access-Control-Allow-Methods', allowedMethods.join(','));
  }

  // 处理其他响应头和数据
  // ...
}

预检请求（Preflight Requests）

在某些情况下，浏览器将会发送一个预检请求以确定实际请求是否被服务器允许。预检请求使用OPTIONS方法，并携带特殊的请求头Access-Control-Request-Method。

服务器需要对预检请求进行处理，返回包含Access-Control-Allow-Origin和Access-Control-Allow-Methods的响应头。

const allowedMethods = ['GET', 'POST'];

// 处理预检请求
function handlePreflight(req, res) {
  const requestOrigin = req.headers.origin;
  const requestMethod = req.headers['access-control-request-method'];

  if (allowedOrigins.includes(requestOrigin) && allowedMethods.includes(requestMethod)) {
    res.setHeader('Access-Control-Allow-Origin', requestOrigin);
    res.setHeader('Access-Control-Allow-Methods', allowedMethods.join(','));
    res.end();
  }
}

其他CORS选项

除了Access-Control-Allow-Origin和Access-Control-Allow-Methods之外，CORS还提供了其他一些选项，例如：

• Access-Control-Allow-Headers：指定允许的请求头字段。
• Access-Control-Allow-Credentials：指定是否允许发送凭证（例如cookies）。
• Access-Control-Max-Age：指定预检请求结果的缓存时间。

完整的CORS设置将根据你的应用程序需求和服务器配置而有所不同。

结论

在JavaScript中，通过设置请求头和处理响应头，我们可以实现跨域资源共享（CORS）。了解和掌握CORS是前端开发中重要的一部分，特别是当你需要与其他域名的服务器进行通信时。

希望本文有助于你理解和应用CORS的概念及实践。对CORS有更多兴趣的话，可以查阅官方文档以及相关资源来进一步深入学习。