CORS 预检通道中的 CORS 标头“Access-Control-Allow-Headers”中缺少令牌“access-control-allow-head

作者:编程家 分类: 编程代码 时间:2025-09-30

CORS 预检通道中的 Access-Control-Allow-Headers 缺少令牌

在跨域资源共享(CORS)机制中,浏览器在发送跨域请求之前会先发送一个预检请求(Preflight Request),以确保服务器接受这个请求。预检请求是一个 OPTIONS 请求,用于检查实际请求是否安全和允许。而在预检请求的响应中,服务器需要设置一些 CORS 相关的标头以告知浏览器允许的请求方法、请求头和响应头等信息。

其中,Access-Control-Allow-Headers 标头用于指定实际请求中允许的自定义请求头。然而,有时候我们会遇到一个问题,即在预检请求的响应中缺少了令牌 "access-control-allow-headers",导致浏览器无法正确处理跨域请求。

案例代码

javascript

// Node.js Express 服务器端代码示例

const express = require('express');

const app = express();

app.options('/api', (req, res) => {

res.header('Access-Control-Allow-Origin', '*');

res.header('Access-Control-Allow-Methods', 'GET, POST');

// 缺少了下面这行代码,导致预检请求的响应中缺少了 "access-control-allow-headers" 令牌

// res.header('Access-Control-Allow-Headers', 'Content-Type');

res.sendStatus(200);

});

app.post('/api', (req, res) => {

// 处理跨域请求

res.header('Access-Control-Allow-Origin', '*');

res.header('Content-Type', 'application/json');

res.send(JSON.stringify({ message: '跨域请求成功' }));

});

app.listen(3000, () => {

console.log('服务器已启动');

});

在上述案例代码中,我们创建了一个基于 Express 的 Node.js 服务器。该服务器的 `/api` 路由用于处理跨域请求。在预检请求的响应中,我们设置了 "Access-Control-Allow-Origin" 和 "Access-Control-Allow-Methods" 这两个标头,分别用于指定允许的请求来源和请求方法。然而,由于疏忽,我们忘记了设置 "Access-Control-Allow-Headers" 标头,导致预检请求的响应中缺少了 "access-control-allow-headers" 令牌。

解决方案

为了解决这个问题,我们只需要在预检请求的响应中设置正确的 "Access-Control-Allow-Headers" 标头即可。该标头的值应包含实际请求中所使用的自定义请求头,例如 "Content-Type"、"Authorization" 等。

修改案例代码中的预检请求响应部分,添加 "Access-Control-Allow-Headers" 标头的设置:

javascript

app.options('/api', (req, res) => {

res.header('Access-Control-Allow-Origin', '*');

res.header('Access-Control-Allow-Methods', 'GET, POST');

res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

res.sendStatus(200);

});

通过以上修改,我们在预检请求的响应中添加了 "Access-Control-Allow-Headers" 标头,其中包含了 "Content-Type" 和 "Authorization" 两个常见的自定义请求头。这样,浏览器就能正确处理跨域请求,并允许携带指定的请求头信息。

在处理跨域请求时,CORS 预检通道起到了重要的作用。要确保预检请求的响应中包含了正确的 CORS 标头,其中的 "Access-Control-Allow-Headers" 标头用于指定实际请求中允许的自定义请求头。如果预检请求的响应中缺少了 "access-control-allow-headers" 令牌,浏览器将无法正确处理跨域请求。因此,我们需要在服务器端设置正确的响应标头,以确保跨域请求能够顺利完成。