缺少 CORS 标头“Access-Control-Allow-Origin” - CORS 请求未成功

Posted 2023-03-04

【中文标题】缺少 CORS 标头“Access-Control-Allow-Origin” - CORS 请求未成功

【英文标题】：CORS header ‘Access-Control-Allow-Origin’ missing - CORS request did not succeed

【发布时间】：2021-12-19 09:16:35

【问题描述】：

我在从 localhost 调用远程 API 时遇到问题。

我正在使用nimble:restivus 包

https://github.com/kahmali/meteor-restivus

根据我正在设置的文档：

enableCors: true

为了允许从任何来源访问。但没有运气。

这是我在浏览器控制台中遇到的错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading 
the remote resource at http://192.168.18.20:9000/api/getUsers. 
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

这是我的服务器端代码：

myApi = new Restivus(
    
    apiPath: 'api/',
    enableCors: true,
    useDefaultAuth: false,
    prettyJson: true,
    defaultOptionsEndpoint: 
        action: function() 
            this.response.writeHead(201, 
                "Access-Control-Allow-Origin", "*",
                "Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Z-Key, Authorization"
                "Content-Type": "application/json",
                "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS"
            );
            this.done();
            return 
                status: "success",
                "data": 
                    "message": "We love OPTIONS"
                
            ;
        
    
);

这是我的客户端代码：

$.ajax
        (
          type: "POST",
          url: "https://example.com/api/getUsers",
          dataType: 'json',
          headers: 
            "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI"
          
          data: ,
          success: function ()
            alert('Thanks for your comment!'); 
          
        );

如果我在标头中不发送任何内容，则请求成功，否则会在浏览器控制台中出错。

谁能帮我解决这个问题？

【问题讨论】：

您的框架一定是配置错误，不知何故。不幸的是，我不熟悉 Restivus。您有机会在 Chrome 中进行测试吗？它也会在那里失败，但在我看来，Chrome 的 CORS 错误消息比 Firefox 提供的信息更多。

应该 "Access-Control-Allow-Origin", "*" 不是 "Access-Control-Allow-Origin": "*"（冒号而不是逗号）？

关于"Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Z-Key, Authorization"的相同评论。

【参考方案1】：

您需要添加 Access-Control-Allow-Credentials 标头，因为您要发送 Authorization 标头。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

编辑：

抱歉，我忘了说，当您发送授权标头时，允许来源标头必须与请求域匹配。当标头为*时，所有请求都将被拒绝

【讨论】：

像这样："Access-Control-Allow-Credentials:": "true"?

我试过了，但我收到了这个错误：跨域请求被阻止：同源策略不允许读取192.168.18.20:9000/api/getUsers 的远程资源。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）

抱歉，请参阅编辑。

我尝试使用此“Access-Control-Allow-Origin”：“192.168.18.20:5000”，但仍然出现同样的错误：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at @ 987654324@。 （原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

对于合格的来源，您需要添加协议。