Question

我现在已经面对这个问题好几天了。我试图从我的网站（mywebsite.com）调用我的API（api.mywebsite.com），它工作正常，直到我尝试传递Authorization标头。那时，它不再是一个简单的请求，而是一个预先要求的请求。

但是，最后不会发送auth标头，我得到的输入是这样的：

这是我的前端代码（JS）：

fetch(generalInfo.url.api+"users/"+userId, {
        method: 'GET',
        headers: {
            "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
            "Authorization": "Bearer "+accessToken
        },
        withCredentials: true
});

虽然这是API后端的中间件：

//Allow the cors from every domain
 module.exports = function (req, res, next){
    res.setHeader('Access-Control-Allow-Origin', req.host);
    res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Authorization');

    if(req.method === 'OPTIONS'){
       return res.send(200);
    }

    next();
}

有人能帮助我吗？

Answer 1

根据https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

特别是，如果满足以下任一条件，则会预检请求：

除了用户代理自动设置的标头之外（例如，连接，用户代理或任何其他标头，其名称在Fetch规范中定义为“禁止标头名称”），

禁用标题包括： https://fetch.spec.whatwg.org/#forbidden-header-name

我们可以看到哪个Access-Control-Request-Headers与您的请求一起发送。这解释了预检的使用。

我认为这个过程看起来没问题 - 但是在你的预检回复标题中我注意到访问控制允许来源是api.myapp.com而在请求中是否在端口8888上。我认为在回复中你应该有端口号，如果它不是80的http。见https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy。如果出现原点相同：

如果两个页面的协议，端口（如果指定了端口）和主机相同，则两个页面具有相同的来源。你会看到这被称为＆＃34; scheme / host / port tuple＆＃34;有时候（＆＃34;元组＆＃34;是一组三个组成，它们共同构成一个整体）。

所以我认为问题可能是你的预检告诉客户只允许api.myapp.com，但实际的请求可能是http://api.myapp.com:8888，所以起源不匹配。或者我误解了你想要做什么？

Answer 2

您必须删除api url的“8888”端口，api服务器必须已经为api.myapp.com地址设置了端口

授权标头未与cors

2 个答案: