获取请求成功完成，但响应对象为空

Posted 2023-02-27

【中文标题】获取请求成功完成，但响应对象为空

【英文标题】：Fetch Request Completes Successfully, but Response Object Empty

【发布时间】：2017-10-31 07:28:10

【问题描述】：

我在 React 组件的 componentDidMount() 方法中有一个获取请求：

const request = new Request(url, 
    mode: 'no-cors',
    method: 'get',
    headers: 
        Accept: 'application/json'
    
);

fetch(request)
    .then(function(response)   
        console.log('Response: ', response);

        return response.text();  
    )
    .then(function(data) 
        // _this.setState( data: data );

        console.log('Success: ', data);
        console.log('Request succeeded with JSON response', data);
    ).catch(function(error) 
        console.log('Request failed', error);
    );

当组件加载时，我可以看到在控制台中发出请求并返回正确的数据；但是，我的 Response 对象始终为空：

Response  type: "opaque", url: "", redirected: false, status: 0, ok: false, statusText: "", headers: Headers, bodyUsed: false 

response.text() 返回 null，我真的不确定发生了什么。我之前用过同样的方法，没有出现这个问题，所以不确定是第三方数据源的原因还是什么的不同。

有什么想法吗？

【问题讨论】：

看起来这可能是no-cors 标头的问题。查看此内容以获取更多信息。 ***.com/questions/36840396/…

谢谢，@ArnavAggarwal。我看到了这个答案，但我没有使用 Express。我可以在没有更多依赖项的情况下安装它吗？我确实尝试过使用 axios，但这也给了我一个网络错误，即使数据像以前一样加载。我之前使用过 Vue 的 axios 来解决类似的 cors 问题。

我应该补充一点，我已经使用 Angular 的 $http.jsonp() 方法在 AngularJS 应用程序中对同一源进行了类似的 API 调用，所以我知道这可以工作。

您需要删除mode: 'no-cors'，正如@ArnavAggarwal 指出的那样，正如***.com/questions/36840396/… 的答案所解释的那样：`mode: 'no-cors' 导致响应设置为opaque，您的前端 javascript 代码看不到它——因为您的浏览器根本不允许前端 JavaScript 访问响应。这就是 mode: 'no-cors' 的目的，通过使用它，这就是您明确告诉浏览器执行的操作。

如果您使用mode: 'no-cors' 的原因是服务器没有在其响应中发送Access-Control-Allow-Origin 响应标头，那么mode: 'no-cors' 不是解决此问题的方法。正确修复它的唯一方法是将服务器配置为发送 Access-Control-Allow-Origin 响应标头，或者更改您的前端 JavaScript 代码以使您通过代理请求。 ***.com/questions/20035101/…

【参考方案1】：

我建议你关注问题下方的cmets：

sideshowbarker 说

如果您使用 mode: 'no-cors' 的原因是因为服务器没有在其响应中发送 Access-Control-Allow-Origin 响应标头，那么 mode: 'no-cors' 不是解决这个问题的方法。正确修复它的唯一方法是将服务器配置为发送 Access-Control-Allow-Origin 响应标头，或者更改您的前端 JavaScript 代码以使您通过代理请求。 follow this link...

【讨论】：

显示临时标题