CORS 和 Access-Control-Allow-Headers 如何工作

服务器

CORS（跨源资源共享）和Access-Control-Allow-Headers是用于解决跨域访问的两个重要概念。本文将讨论它们的工作原理，并提供一些案例代码进行说明。

CORS是什么？

CORS是一种机制，用于允许在一个域下的网页可以访问来自不同域的资源。在传统的同源策略下，浏览器限制了跨域资源的访问，CORS则允许服务器在响应中添加一些头信息，以告知浏览器是否允许跨域访问。

Access-Control-Allow-Headers是什么？

Access-Control-Allow-Headers是CORS中的一个响应头信息，用于指定服务器允许请求中携带的自定义头信息。默认情况下，浏览器只允许一些常见的头信息，如Content-Type和Authorization。如果需要在请求中携带其他自定义头信息，服务器需要在响应中添加Access-Control-Allow-Headers头信息来进行声明。

CORS工作原理

当浏览器发送跨域请求时，首先会发送一个预检请求（OPTIONS请求）给服务器，询问服务器是否接受跨域请求。服务器在响应中添加一些CORS相关的头信息，包括Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers等。浏览器根据这些头信息判断是否允许跨域访问。

Access-Control-Allow-Headers工作原理

在预检请求中，浏览器会携带一个Access-Control-Request-Headers头信息，用于声明实际请求中会携带的自定义头信息。服务器可以根据这个头信息来确定是否允许请求中携带自定义头信息。如果服务器允许，就在响应中添加Access-Control-Allow-Headers头信息，并指定允许的自定义头信息列表。

下面是一个简单的案例代码，用于演示CORS和Access-Control-Allow-Headers的工作过程：

// 前端代码
const url = 'http://example.com/api/data';
const customHeader = 'X-Custom-Header';
fetch(url, {
  method: 'GET',
  headers: {
    [customHeader]: 'custom value',
  },
})
  .then(response => response.JSon())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });
// 服务器代码
const express = require('express');
const app = express();
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Custom-Header');
  next();
});
app.get('/api/data', (req, res) => {
  // 处理请求并返回数据
  res.JSon({ message: 'Hello CORS!' });
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在上述案例中，前端代码通过fetch函数发送一个带有自定义头信息的GET请求到http://example.com/api/data。服务器代码使用express框架，通过设置响应头信息，允许跨域访问和携带自定义头信息。最终，服务器返回一个包含简单消息的JSON响应。

通过以上案例，我们可以清楚地了解到CORS和Access-Control-Allow-Headers的工作原理。CORS机制解决了同源策略下的跨域问题，而Access-Control-Allow-Headers则允许服务器声明允许请求中携带的自定义头信息。这些机制为Web开发中的跨域访问提供了便利，使得不同域之间的数据交互更加灵活和安全。