在 fetch api 中启用 CORS

IT技术 javascript reactjs fetch-api
2021-04-07 08:55:15

我收到以下错误消息，无法继续

无法加载https://site/data.json：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问Origin ' http://localhost:8080 '。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。localhost/:1 Uncaught (in promise) TypeError: Failed to fetch

我试图CORS在我的 react js 文件中启用，但我无法获得预期的结果。我已经安装了一个 chrome 扩展并且它可以工作。但是要在生产站点中使用它，我需要在我的代码中启用它。我应该如何正确安排代码以启用CORS.

fetch(URL, {
  mode: 'cors',
  headers: {
    'Access-Control-Allow-Origin':'*'
  }
})
  .then(response => response.json())
  .then(data => {
1个回答

浏览器在客户端具有跨域安全性，可验证服务器是否允许从您的域中获取数据。如果Access-Control-Allow-Origin在响应头中不可用，浏览器不允许在您的 JavaScript 代码中使用响应并在网络级别抛出异常。您需要cors在服务器端进行配置。

您可以使用mode: 'cors'. 在这种情况下，浏览器不会抛出跨域执行，但浏览器不会在您的 javascript 函数中给出响应。

因此，在这两种情况下，您都需要cors在服务器中进行配置，或者需要使用自定义代理服务器。

我认为是一个错字，它no-cors返回了一个不透明的响应，请参阅stackoverflow.com/a/43268098/6324591
2021-06-07 08:55:15
如果您想获取任何其他服务器（如 google 或 facebook）并且该服务器不提供访问权限，您可能需要一个服务器来处理此问题。在服务器中，您可以从谷歌获取响应并将其发送回客户端。
2021-06-11 08:55:15
如果我试图抓取 Google 结果怎么办？就像，我想https://www.google.com从我的客户端代码请求并解析结果。是否可以？我得到了和他一样的错误。这是否意味着 google.com 不允许对其主要搜索页面的 CORS 请求？谢谢。
2021-06-18 08:55:15
其它你可能感兴趣的问题
上一篇如何为 React 路由设置 apache 服务器？ 下一篇ReactJS 中的 prevState 是什么？