Cross-Origin 阅读 React 应用程序上的阻塞但不阅读 Laravel

Question

从遗留 Laravel 应用程序迁移到 React 前端。使用 Fetch 调用 API。它适用于 laravel（使用 fopen 和 stream_get_contents 获取数据）所以我知道这不是服务器问题，因为使用相同的本地主机。但是对于React，使用fetch从api抓取数据却报错：

我已将内容类型更改为 application/json 以匹配 header 但仍然没有。我的回复 body 是空的。当我转到 API link 时，我得到一个 xml 文件，因此 link 可以工作，我可以在我的浏览器上看到它，但我的反应应用程序没有保存响应body 信息。

   apiCall = () => {
    const exampleAPILink = 'My_API_URL'
    const config = {
    method: 'GET',
    mode: 'no-cors',
    headers: {
    'Content-Type': 'application/json',
    }
   };
fetch(exampleAPILink, config).then(function(response){
  console.log(response.body);
  //null
}).catch(function(error){
  console.log(error);
});

}

*我需要 'no-cors' 否则会出现 CORS 禁止访问错误。

Answer 1

no-cors 表示您告诉 fetch 您不打算做任何需要 CORS 许可的事情，它不应该要求它。

问题是您正在做一些需要 CORS 许可的事情。您正在尝试阅读 cross-origin 回复。

结果是 CORBs 错误。

您需要将模式更改为 cors 并更改您从中请求数据的服务器，以便它授予权限。

您正在发出 GET 请求。在上面设置一个Content-Typeheader是没有意义的。没有要求body描述的类型。

您可能会混淆 Content-Type 和 Accept。

application/json不是简单的Content-Type，所以你不仅需要CORS权限来读取响应，而且浏览器会发送一个预检请求来询问是否允许在第一时间发送请求地方。

不要在 GET 请求上设置 Content-Type header。

Cross-Origin 阅读 React 应用程序上的阻塞但不阅读 Laravel

Cross-Origin Read Blocking on React app but not Laravel

reactjs

laravel

fetch

cross-origin-read-blocking