Ad

Dreamhost + Drupal 8 + ReactJS + CORS

- 1 answer

Dreamhost support wasn't able to help me much on this, and I've done a lot of googling but to no avail. My client's site has been down for at least 12 hours and I need help getting it back up. There are two levels to this problem because my development server is having a similar, but slightly different issue.

My setup is that I have Drupal 8 running at a subdomain and a ReactJS app being served from the main domain. I have the JSON:API module installed and I'm using the fetch api in React to get data from Drupal. No authentication or other Methods, just getting data for my app to use. Everything worked yesterday and I hadn't changed anything on hosting or deployed any new code.

The initial error I was getting in the browser javascript console was this:

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 support suggested that I add the following code to my .htaccess file:

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"

This is my services.yml file located at /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

When I visit the domain I just get a 403 (Forbidden) error, but on my development server (nodejs) I get the following errors:

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.

AND

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.

I suspect that there is some issue with these two files not playing well together, but I can't figure out what is causing the problems. I've tried variations on the settings for Access-Control-Allow-Origin and allowedOrigins on .htaccess and services.yml respectively and nothing seems to be changing anything.

Can anyone point me in the right direction?

edited to remove exact urls

Ad

Answer

After some work with Dreamhost support and some playing around we figured out a solution to this. For this particular configuration, CORS policy has to be correctly configured for the hosting AND Drupal. These are the settings that ended up working for us:

Added the following to the .htaccess file under the domain root of the 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"

Under the /sites/default directory, added a settings.yml file with the following content:

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

The key thing that was tripping us up was how the file changes could be made to be effective. Changes to the .htaccess file were immediately effective, but changes to the settings.yml file required that we clear the cache in Drupal:

Configuration->Development->Performace->Clear cache

Ad
source: stackoverflow.com
Ad