Cors error with embed React while in development mode

Question

I'm trying to embed a React app inside a page rendered by a Drupal 9.4.x site.

It works fine on the online server, with the build script. However, if i try to load the page locally, with the development server, I get the CORS error:

Access to script at 'http://localhost:9000/react-app.js' from origin 'https://drupalsite.ddev.site' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Theoretically the Drupal back-end is configured correctly for the CORS. The service.yml configuration about is:

  cors.config:
    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: [ 'Access-Control-Allow-Origin', 'Accept', 'Content-Disposition', 'Content-Type', 'x-csrf-token', 'content-type', 'content-disposition', 'authorization' ]
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: [ '*' ]
    # Configure requests allowed from specific origins.
    allowedOrigins: [ 'http://localhost', 'http://localhost:9000', 'https:/www.onlinesite.com' ]
    # 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

The script is embeded in a twig in this way:

  <link rel="stylesheet" href="http://localhost:9000/style.css"/>
  <script type="module" src="http://localhost:9000/react-app.js"></script>

Do I need to configure something on React? The React app is done with React 17.0.2 and Craco 6.1.1.

Have you read the error message? I don't see `https://drupalsite.ddev.site` listed as an allowed origin; it should be. Besides, you can safely drop `Access-Control-Allow-Origin` and `Content-Disposition` from the list of allowed request headers, as those are response headers, not request headers. — jub0bs, Oct 22 '22 at 16:11
That is to configure the CORS of the drupal site, so it should be necessary: I mean, drupalsite.ddev.site is the local\PHP server where hosting the page where script is embeded, while localhost is the local react server where the react app is living. Configuring the CORS on the react side seems to solve the issue. I'll drop those extra headers, thanks. — Giuseppe, Oct 23 '22 at 15:13

Giuseppe · Answer 1 · 2022-10-25T07:54:57.367

-2

It is necessary to add the CORS request on the react app too:

Inside the craco.config.js file:

  devServer: {
    headers: {
      'Access-Control-Allow-Origin': 'https://drupalsite.ddev.site',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Credentials': 'true',
    },

Solution inspired by https://stackoverflow.com/a/44748420/5065842

edited Oct 25 '22 at 07:54

answered Oct 23 '22 at 15:10

Giuseppe

379
4
13

No, these are all response headers, which have no place in a request. – jub0bs Oct 23 '22 at 16:07
Yet, it is the configuration needed to make it work. After a test I can confirm the `Access-Control-Allow-Header` were actually not necessary, as you said. However, `Access-Control-Allow-Origin` and `Access-Control-Allow-Methods` are definitely required to make this kind of setup work (Drupal back-end that host the page, React app with local server in a embed js) – Giuseppe Oct 25 '22 at 07:57
Those headers may be necessary in a _response_ for CORS to succeed; never in a _request_. That's my point. – jub0bs Oct 25 '22 at 11:09

Cors error with embed React while in development mode

1 Answers1