收到错误请求的资源上不存在“Access-Control-Allow-Origin”标头答案

【问题标题】：Getting error No 'Access-Control-Allow-Origin' header is present on the requested resource收到错误请求的资源上不存在“Access-Control-Allow-Origin”标头
【发布时间】：2017-10-23 11:59:32
【问题描述】：

我正在尝试创建一个无头的 drupal 应用程序。我使用drupal 8 作为后端并作为前端做出反应。我使用核心休息服务模块在 drupal 8 中创建了 REST 服务。问题是当我调用 api 时它给了我错误，即

Fetch API 无法加载 http://192.168.1.246/headless-react/api/events。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:3000' 不允许访问。响应的 HTTP 状态代码为 403。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我为 cors.config 配置了 services.yml 文件，但仍然出现错误。谁能知道如何解决它？谢谢

【问题讨论】：

显然没有正确配置
可能会出现此错误，因为您的本地主机正在尝试访问您的 ip (192.168.1.246)。尝试在您的 ip 上托管您的网页或在 localhost 上托管您的服务器。
您是否检查了响应服务器提供的信息？是否真的有“Access-Control-Allow-Origin”标头？有一个非常好的测试程序，叫做“Postman”：getpostman.com/postman
启动浏览器控制台并转到网络选项卡。检查 XHR 下的资源并查看 Access Control Allow Origin 标头。您可能还想检查 MetaTag 模块，它是否设置了正确的推荐人策略。

标签： javascript reactjs drupal drupal-8

【解决方案1】：

安装CORS模块https://www.drupal.org/project/cors

它将让您克服与跨原点相关的错误

【讨论】：

【解决方案2】：

我正在使用它的扩展名。您收到此警告的原因是您从另一个域调用了 api。或者你可以使用 nginx。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：

【解决方案3】：

您需要提及您在使用 ReactJS 的前端中使用了哪些构建工具。假设您使用的是 webpack，您需要在位于根目录的 package.json 中添加一个代理，如下所示：

package.json

...
"name": "relay-starter-kit",
"proxy":"<your-base-remote-server-url-here",
"private": true,
...

例如，如果您的服务器位于https://www.myawesomeserver.com，那么 "proxy": "https://www.myawesomeserver.com".

在您的情况下，"proxy":"http://192.168.1.246" 应该可以工作。

在你的应用程序中，如果你需要访问路由https://www.myawesomeserver.com/home，那么你只需要传递路由，webpack 就会从 package.json 中的代理获取 base url 回家的请求看起来像，

const getHome = async() => {
  try{
    const raw = await fetch('/home')
    const res = await raw.json()
  } catch(e) {
    console.log(e)
 }
}

这是因为当您运行 webpack 时，它会在其 webpack 开发服务器上运行 react 应用程序，并且为了您与任何其他服务器通信，webpack 必须代表您发出请求。如果您不使用 webpack，这可能对您没有用处。

【讨论】：