Question

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

Fetch API无法加载http://192.168.1.246/headless-react/api/events。对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:3000＆＃39;因此不允许访问。响应具有HTTP状态代码403.如果不透明响应满足您的需要，请将请求的模式设置为“no-cors＆＃39;在禁用CORS的情况下获取资源。

我为cors.config配置了services.yml文件但仍然出错。任何人都有任何想法如何解决它？谢谢

Answer 1

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

它将帮助您克服与交叉原点有关的错误

Answer 2

我正在使用扩展程序。您之所以收到此警告是因为您从另一个域调用了api。或者你可以使用nginx。

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

Answer 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中的代理中获取基本URL 家庭请求看起来像，

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

这是因为当您运行webpack时，它会在其webpack dev服务器上运行react应用程序，并且您可以与任何其他服务器进行通信，webpack将代表您提出请求。如果您不使用webpack，这可能对您没用。

获取错误否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上

3 个答案: