No 'Access-Control-Allow-Origin' header is present on the requested resource. on the Pantheon Site

Question

I have created a Webservice in Drupal 9 of the Pantheon (Locked) Site that I need to call from another domain. I have tried almost all the solutions I found but nothing is working.

services.yml

  # Configure Cross-Site HTTP requests (CORS).
  # Read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
  # for more information about the topic in general.
  # Note: By default the configuration is disabled.
  cors.config:
    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: ['x-csrf-token','authorization','content-type','accept','origin','x-requested-with', 'access-control-allow-origin','x-allowed-header','*']
    # 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: false
    # Sets the Access-Control-Max-Age header.
    maxAge: false
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: true

I am using this xhr to fetch the data.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://***.pantheonsite.io/page/performance/', true);
xhr.withCredentials = true;
xhr.setRequestHeader('Authorization', 'Basic ' + btoa("test:123456!"));
xhr.setRequestHeader('Content-Type', 'text/html');
xhr.onload = function () {
  if (xhr.status === 200) {
      console.log(xhr.responseText);
  } else {
      console.error(xhr.statusText);
  }
};
xhr.send();

Any help would be appreciated!

Answer 1

I tested this on my test site where I enabled CORS like this:

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

I also enabled basic auth from Pantheon dashboard. Then, I sent a request like this:

curl -I --location ‘https://<DOMAIN>/node/1?_format=json’ \
--header ‘Origin: https://example.com’ \
--header ‘Authorization: Basic <base64encoded>’

And got this as response:

HTTP/2 200
access-control-allow-origin: https://example.com
cache-control: max-age=3600, public
content-language: en
content-type: application/json
... lots more headers here

Which makes me think that it's working as expected.

If things are still not working for you, could you please provide some more info? (e.g. example request, example response)

Hope this helps!