我可以通过Postman点击这个端点http://catfacts-api.appspot.com/api/facts?number=99,它返回JSON

此外,我正在使用创建-反应-应用程序,并希望避免设置任何服务器配置。

在我的客户端代码中,我试图使用fetch来做同样的事情,但我得到了错误:

被请求对象上没有'Access-Control-Allow-Origin'报头 资源。因此,来源“http://localhost:3000”是不允许的 访问。如果不透明响应满足您的需求,请设置请求的 mode为'no-cors'来获取禁用CORS的资源。

所以我试图传递一个对象给我的Fetch,它将禁用CORS,像这样:

fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'})
  .then(blob => blob.json())
  .then(data => {
    console.table(data);
    return data;
  })
  .catch(e => {
    console.log(e);
    return e;
  });

有趣的是,我得到的错误实际上是这个函数的语法错误。我不确定我的实际获取是坏的,因为当我删除{mode: 'no-cors'}对象,并提供了一个不同的URL,它工作得很好。

我还尝试过传入object {mode: 'opaque'},但这将从上面返回原始错误。

我相信我所需要做的就是禁用CORS..我错过了什么?


当前回答

我有一个类似的问题,我的浏览器调试器说我的响应。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>

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

如果上述所有解决方案都不起作用,可能是因为文件权限,因为有时即使您使用Heroku或其他方式修复了非cors问题,它也会抛出403禁止错误。设置目录/文件权限如下:

权限和所有权错误 403 Forbidden错误也可能由web内容文件和文件夹的不正确所有权或权限引起。

权限 正确权限的经验法则:

文件夹:755

静态内容:644

动态内容:700

我有一个类似的问题,我的浏览器调试器说我的响应。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>

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