Dreamhost + Drupal 8 + ReactJS + CORS

Question

Dreamhost 支持在这方面帮不了我太多，我用谷歌搜索了很多，但都无济于事。我客户的网站已关闭至少 12 小时，我需要帮助才能恢复。这个问题有两个级别，因为我的开发服务器有一个类似但略有不同的问题。

我的设置是在子域中安装了 Drupal 8 运行，并在主域中提供了 ReactJS 应用程序。我安装了 JSON:API 模块，并在 React 中使用 fetch api 从 Drupal 获取数据。没有身份验证或其他方法，只是获取数据供我的应用使用。昨天一切正常，我没有更改托管或部署任何新代码。

我在浏览器 javascript 控制台中遇到的初始错误是这样的：

Access to fetch at 'http://CMS_URL/jsonapi/node/person_page' from origin 'http://SITE_URL' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Dreamhost 支持建议我将以下代码添加到我的 .htaccess 文件中：

Header add Access-Control-Allow-Origin: "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Header add Access-Control-Allow-Headers: "Content-Type"

这是我的 services.yml 文件，位于 /sites/default:

parameters:
  cors.config:
    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: ['x-csrf-token','authorization','content-type','accept','origin','x-requested-with', '*']
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: ['GET']
    # Configure requests allowed from specific origins.
    allowedOrigins: ['*']
    # Sets the Access-Control-Expose-Headers header.
    exposedHeaders: true
    # Sets the Access-Control-Max-Age header.
    maxAge: 1000
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: false

当我访问该域时，我只收到 403（禁止访问）错误，但在我的开发服务器 (nodejs) 上，我收到以下错误：

Access to fetch at 'http://CMS_URL/jsonapi/node/slide_page/fe770c69-8d4d-489f-9ab9-8e6abce55bb4' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:3000, *', but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

和

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://CMS_URL/jsonapi/node/slide_page/fe770c69-8d4d-489f-9ab9-8e6abce55bb4 with MIME type application/vnd.api+json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

我怀疑这两个文件不能一起播放有问题，但我无法弄清楚是什么导致了问题。我已经分别在 .htaccess 和 services.yml 上尝试了 Access-Control-Allow-Origin 和 allowedOrigins 设置的变体，但似乎没有任何改变。

谁能指出我正确的方向？

已编辑以删除确切的网址

Answer 1

在 Dreamhost 支持下进行了一些工作并进行了一些尝试后，我们找到了解决方案。对于此特定配置，必须为托管和 Drupal 正确配置 CORS 策略。这些是最终对我们有用的设置：

将以下内容添加到 CMS 域根目录下的 .htaccess 文件中：

# enable CORS
Header add Access-Control-Allow-Origin: "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Header add Access-Control-Allow-Headers: "Content-Type"

在/sites/default目录下，添加了一个settings.yml文件，内容如下：

parameters:
  cors.config:
    enabled: false
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: ['x-csrf-token','authorization','content-type','accept','origin','x-requested-with', '*']
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: ['*']
    # Configure requests allowed from specific origins.
    allowedOrigins: ['*']
    # Sets the Access-Control-Expose-Headers header.
    exposedHeaders: true
    # Sets the Access-Control-Max-Age header.
    maxAge: 1000
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: false

让我们感到困惑的关键是如何使文件更改生效。对 .htaccess 文件的更改立即生效，但对 settings.yml 文件的更改需要我们清除 Drupal 中的缓存：

Configuration->Development->Performace->Clear cache

Dreamhost + Drupal 8 + ReactJS + CORS

Dreamhost + Drupal 8 + ReactJS + CORS

reactjs

cors

drupal-8

dreamhost