为啥我得到原因：成功返回数据时缺少 CORS 标头“Access-Control-Allow-Origin”

Posted 2023-03-04

【中文标题】为啥我得到原因：成功返回数据时缺少 CORS 标头“Access-Control-Allow-Origin”

【英文标题】：Why I get Reason: CORS header 'Access-Control-Allow-Origin' missing while data is returned successfully为什么我得到原因：成功返回数据时缺少 CORS 标头“Access-Control-Allow-Origin”

【发布时间】：2019-05-05 14:42:45

【问题描述】：

我知道这个问题在SO 已经被问过很多次了，但这个问题完全不同！

作为Mozilla itself says 的标题，您必须在nginx 中进行如下设置：

add_header 'Access-Control-Allow-Origin' 'origin-list'

我已经设置了CORS 选项，有趣的是preflight request 成功了：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Origin,Content-Type,Accept,authorization,Expires,Pragma,x-custom-header
Access-Control-Allow-Methods: GET, POST, OPTIONS, PATCH
Access-Control-Allow-Origin: https://localhost:3000

端点是/user。现在实际的 GET 请求被发送到服务器，它再次成功，200 响应代码 JSON 有效载荷它预期！

问题在于我想从jQuery 中获取这些数据，如下所示：

$.ajax(
        type: "GET",
        url: url_endpoint,
        beforeSend: function(request) 
            request.setRequestHeader("Authorization", "Bearer " + _TOKEN);
        ,
        dataType: "json",
        error: function (data, stat)  
            console.log('got error data: ', stat);
            console.log(data);
        ,
        complete: function(xhr, data) 
            console.log('here is the data...', data, xhr);
        
    ).catch(function(data,x,y) 
        console.log(data,x,y,'it seems request has error!!!!');
    );

它会记录请求的错误部分，例如 catch 内部，在控制台中我看到以下错误：

跨域请求被阻止：同源策略不允许读取位于https://www.example.com/restapi/user 的远程资源。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。[了解更多]

当我解释在OPTIONS 中返回标头时，它显示标头丢失。为了确保此错误与此特定请求相关，我注释掉了 /user 请求和 CORS 的错误消失了。

为什么我得到CORS 而OPTIONS 的服务器响应为204 以及为什么我得到CORS 而json 响应为/user 返回

【问题讨论】：

您确定您的电话来自localhost:3000？您是否尝试过 Access-Control-Allow-Origin: * 只是为了测试以确保 CORS 标头正常工作？

@RoryMcCrossan - 我希望如果OPTIONS 调用不是来自允许的来源，浏览器甚至不会发出GET。但它在 OP 的示例中。

很高兴看到一个好的 CORS问题...

确实如此。对两个 cmets :)

@RoryMcCrossan，是的，我将它设置为'*'，它在OPTIONS 响应中给出*

【参考方案1】：

CORS 标头必须还伴随对GET 的响应，而不仅仅是对OPTIONS 的响应。例如，您发送两次（如果有预检）。