Dreamhost + Drupal 8 + ReactJS + CORS - PullRequest
Новая
       38

Dreamhost + Drupal 8 + ReactJS + CORS

0 голосов
/ 10 июля 2019

Поддержка Dreamhost не смогла мне сильно помочь в этом, и я много гуглил, но безрезультатно.Сайт моего клиента был закрыт не менее 12 часов, и мне нужна помощь, чтобы восстановить его.Эта проблема имеет два уровня, потому что у моего сервера разработки есть похожая, но немного другая проблема.

Моя установка состоит в том, что у меня Drupal 8 работает на поддомене, а приложение ReactJS обслуживается из основного домена.У меня установлен модуль JSON: API, и я использую API выборки в React для получения данных из Drupal.Никакой аутентификации или других методов, просто получение данных для моего приложения для использования.Все работало вчера, и я ничего не изменил на хостинге или развернул новый код.

Первоначальная ошибка, которую я получал в консоли javascript браузера, была такой:

Доступ к выборкев 'http://CMS_URL/jsonapi/node/person_page' от источника' http://SITE_URL' был заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок 'Access-Control-Allow-Origin'.Если непрозрачный ответ отвечает вашим потребностям, установите режим запроса 'no-cors', чтобы получить ресурс с отключенным CORS.

Поддержка 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) Я получаю следующие ошибки:

Доступ к выборке в 'http://CMS_URL/jsonapi/node/slide_page/fe770c69-8d4d-489f-9ab9-8e6abce55bb4' из источника' http://localhost:3000' был заблокирован политикой CORS: ДоступЗаголовок -Control-Allow-Origin 'содержит несколько значений' http://localhost:3000, * ', но допускается только одно.Пусть сервер отправит заголовок с допустимым значением или, если непрозрачный ответ удовлетворяет вашим потребностям, задайте для режима запроса значение «no-cors», чтобы получить ресурс с отключенным CORS.

AND

Блокировка чтения из разных источников (CORB) блокировала ответ из нескольких источников http://CMS_URL/jsonapi/node/slide_page/fe770c69-8d4d-489f-9ab9-8e6abce55bb4 с приложением MIME-типа / vnd.api + json.См. https://www.chromestatus.com/feature/5629709824032768 для получения более подробной информации.

Я подозреваю, что есть какая-то проблема с этими двумя файлами, которые плохо воспроизводятся вместе, но я не могу понять, что вызывает проблемы.Я пробовал варианты настроек Access-Control-Allow-Origin и allowOrigins для .htaccess и services.yml соответственно, и, похоже, ничего не меняется.

Может кто-нибудь указать мне правильное направление?

отредактировано для удаления точных URL

1 Ответ

0 голосов
/ 13 июля 2019

После некоторой работы с поддержкой Dreamhost и некоторой тренировки мы нашли решение этой проблемы. Для этой конкретной конфигурации политика CORS должна быть правильно настроена для хостинга И Drupal. Вот настройки, которые у нас сработали:

В файл .htaccess в корневом каталоге домена CMS добавлено следующее: 

# 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

...