CORS 策略：使用 axios 时，在预检响应中 Access-Control-Allow-Headers 不允许请求标头字段 access-control-allow-origin

Posted 2023-02-27

【中文标题】CORS 策略：使用 axios 时，在预检响应中 Access-Control-Allow-Headers 不允许请求标头字段 access-control-allow-origin

【英文标题】：CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response when using axios

【发布时间】：2019-11-06 20:35:22

【问题描述】：

我正在使用axios调用api和bearer token方式进行授权，我的代码：

export default axios.create(
    baseURL,
    headers: 
        'Content-Type': 'application/json',
        'Authorization': `Bearer  $localStorage.getItem('token')`
    
);

在UserRepository.js中，Repository被导入，api被调用：

loadUsers() 
    return Repository.get(`$users`);

然后错误是“未授权”，但是当我更新标题时：

export default axios.create(
    baseURL,
    headers: 
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS',
        'Content-Type': 'application/json',
        'Authorization': `Bearer  $localStorage.getItem('token')`
    
);

错误是：从源“http://localhost:8080”访问 XMLHttpRequest 在“http://example.com/users”已被 CORS 策略阻止：Access-Control-Allow- 不允许请求标头字段 access-control-allow-origin预检响应中的标头。

【问题讨论】：

Access-Control-Allow-Origin 和 Access-Control-Allow-Methods 是响应标头。您不要将它们添加到您的请求中

localStorage.getItem('token') 在你创建你的 Axios 实例时真的设置了吗？如果没有，您应该改用拦截器。您可以在浏览器的 Network 控制台

中检查请求标头

我在浏览器中查看了网络的请求，token是可以的

您的 API 似乎不同意。这可能是因为您在 "Bearer" 和您的令牌之间有一个额外的空间。是什么让您想到将Access-Control-Allow-Origin 等添加到您的请求标头中？ 究竟是什么响应/错误消息？ Network 控制台的屏幕截图可能会有所帮助

是的，我看到了多余的空间，谢谢

【参考方案1】：

您遇到的错误是因为服务器负责报告允许的来源。如果您的服务器是快速服务器，您将使用这段代码来解决此错误：

`

app.use(function (req, res, next) 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
);

`

请参阅here 了解更多信息。

【参考方案2】：

这部分代码应该在您的 api 中，而不是在客户端中。它是响应标头的一部分。

'Access-Control-Allow-Origin': '*',
  'Content-Type': 'application/json',

【讨论】：

Content-type 作为请求头没有问题（用于 POST、PUT 等请求）