Question

我正在使用axios调用api和不记名令牌方式进行授权，我的代码是

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

在UserRepository.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')}`
    }
});

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

Answer 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。

Answer 2

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

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

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

2 个答案: