如果您试图在您的本地主机上临时解决这个问题，您可以使用这个chrome扩展:允许CORS访问控制-允许起源 https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

我的解决方案是在服务器端进行

我使用c# WebClient库来获取数据(在我的例子中是图像数据)并将其发送回客户端。在您选择的服务器端语言中可能有一些非常类似的东西。

//Server side, api controller

[Route("api/ItemImage/GetItemImageFromURL")]
public IActionResult GetItemImageFromURL([FromQuery] string url)
{
    ItemImage image = new ItemImage();

    using(WebClient client = new WebClient()){

        image.Bytes = client.DownloadData(url);

        return Ok(image);
    }
}

您可以根据自己的用例对其进行调整。重点是client.DownloadData()工作时没有任何CORS错误。通常CORS问题只发生在网站之间，因此从服务器发出“跨站点”请求是可以的。

然后，React获取调用就像这样简单:

//React component

fetch(`api/ItemImage/GetItemImageFromURL?url=${imageURL}`, {            
        method: 'GET',
    })
    .then(resp => resp.json() as Promise<ItemImage>)
    .then(imgResponse => {

       // Do more stuff....
    )}

我有一个类似的问题，我的浏览器调试器说我的响应。Body为null，但fiddler和开发人员工具显示它已填充，结果基本上与此相同的场景。我正在使用一个本地Angular应用程序访问运行在IISExpress上的Web Api服务。我通过遵循这里列出的步骤来找到正确的applicationhost来修复它。config文件添加Access-Control-Allow-Origin头文件，如下所示:

  <customHeaders>
    <clear />
    <add name="X-Powered-By" value="ASP.NET" />
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
  </customHeaders>

您还可以设置反向代理，使用自托管的CORS Anywhere或Just CORS添加CORS头，如果您需要托管解决方案。

https://justcors.com/<id>/<your-requested-resource>
http://cors-anywhere.com/<your-requested-resource>

如果你使用Express作为后端，你只需要安装cors并导入并在app.use(cors());中使用它。 如果无法解决，则尝试切换端口。 交换端口后一定会解决

如果您试图在您的本地主机上临时解决这个问题，您可以使用这个chrome扩展:允许CORS访问控制-允许起源 https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf