授权标头不适用于 cors [关闭]

Posted 2023-03-04

【中文标题】授权标头不适用于 cors [关闭]

【英文标题】：Authorization headers not working with cors [closed]

【发布时间】：2018-11-01 16:35:41

【问题描述】：

我已经面临这个问题好几天了。我正在尝试从我的网站 (mywebsite.com) 调用我的 API (api.mywebsite.com)，它工作正常，直到我尝试传递授权标头。到那时，它不再是一个简单的请求，而是一个预检请求。

但是，最后没有发送身份验证标头，我得到的输入是这个：

这是我的前端代码（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();

谁能帮帮我？

【问题讨论】：

选项请求在设计上不包含 auth 标头。

@KevinB 我不是要求他们传递 Auth 标头，而是我在问为什么它在收到响应并且一切正常后不发出新的 GET 请求。跨度>

因为……一切都不好。原点与允许的原点不匹配。错误消息至少应该告诉你这么多。

【参考方案1】：

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

【参考方案2】：

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

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

如果，除了用户代理自动设置的标头（例如，Connection、User-Agent 或任何其他标头，其名称在 Fetch 规范中定义为“禁止标头名称”），

禁止的标头包括： https://fetch.spec.whatwg.org/#forbidden-header-name

其中有Access-Control-Request-Headers，我们可以看到它正在随您的请求一起发送。这解释了预检的使用。

我认为该过程看起来不错 - 但在您对预检的响应标头中，我注意到访问控制允许来源是 api.myapp.com，而在请求中如果在端口 8888 上。我认为在响应中你应该有端口号，如果它不是 http 的 80。见https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy。如果满足以下条件，则原点相同：

如果两个页面的协议、端口（如果指定）和主机相同，则两个页面具有相同的来源。您有时会看到这被称为“方案/主机/端口元组”（其中“元组”是由三个组件组成的集合，它们共同构成一个整体）。

所以我认为问题可能是您的预检对客户说只允许 api.myapp.com 但实际请求可能是向http://api.myapp.com:8888 提出的，因此来源不匹配。还是我误解了您要做什么？

【讨论】：

我尝试手动添加端口和协议，但结果没有改变。仍然只收到 OPTIONS 请求@DavidGoate

好的，可以了！我添加了错误的端口（API 之一而不是 webapp 之一）。并非一切正常！非常感谢你，伙计！

正常的流程是，在一个成功的选项请求之后，如果 CORS 检查通过，浏览器将发出实际的请求。您能否查看网络开发人员工具控制台中是否有任何错误解释了原因。我的直觉说这只是起源不匹配。在您的示例中，我看到超过 1 个来源正在使用中。

酷，很高兴你成功了！