CORS策略：使用axios时，飞行前响应中的Access Control允许头不允许请求头字段访问-控制-允许-起源

Question

我使用axios调用api和承载令牌的方式进行授权，我的代码：

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

在用户存储库中。js时，将导入存储库并通过以下方式调用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://example.com/users“起源”http://localhost:8080'已被CORS策略阻止：飞行前响应中的访问控制允许标头不允许请求标头字段访问控制允许来源。

Answer 1

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

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

Answer 2

您收到的错误是因为服务器负责报告允许的来源。如果您的服务器是express server，您将使用以下代码来解决此错误：

`

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();
});