在React应用程序上跨源读取阻止，但不是Laravel

Question

从旧版Laravel应用迁移到React前端。使用提取来调用API。它可以在laravel上运行（使用fopen和stream_get_contents来获取数据），所以我知道这与使用相同的localhost不是服务器问题。但是对于React，使用fetch从api抓取数据却出现以下错误：

我已将内容类型更改为application / json以匹配标头，但仍然没有。我的回复正文为空。当我转到API链接时，我得到一个xml文件，因此该链接可以工作，并且可以在浏览器中看到它，但是我的react应用程序未保存响应正文信息。

   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许可的操作。您正在尝试读取跨域回复。

结果是CORBs错误。

您需要将模式更改为cors，并更改要从其请求数据的服务器，以便授予许可。

---

您正在发出GET请求。在其上设置Content-Type标头没有任何意义。没有用于描述类型的请求正文。

您可能将Content-Type与Accept混淆了。

application/json不是简单的Content-Type，因此，您不仅需要CORS权限来读取响应，而且浏览器还将发送预检请求，以首先请求权限来发送请求。

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