How/Where to set list of allowedHosts on running an app with react-app-rewired start

[pavanteja-potnuru]

Issue

I have two apps:

1. One App using react-app-rewired with client devServer(localhost:3000)(devServer) hosts some static js files and graphql resolvers(API) on the server side(localhost:4012).(app/server 1)
2. The second one is a simple Express app(localhost:4000). (app2)

Scenario:

• App2 loads some js files from devServer.(I am able to load js files from localhost:3000)
• Fetched js files request a few APIs from app/server1 (localhost:3000/apipath) via devServer since proxy is already set in client package.json. (API calls are rejected with CORS error for api calls from localhost:4000 to localhost:3000.)

Query: How to set up devServer with allowedHosts. Please check webpack documentation.

Reference: https://webpack.js.org/configuration/dev-server/#devserverallowedhosts

App1 client package.json:

"proxy": "http://localhost:4012",
"scripts": {
        "start-dev": "react-app-rewired start" // hosted on localhost:3000
}

I feel like an issue with proxy, because I am able to fetch js files from devServer but requests which need proxy are like API call to graphql query giving CORS issue. Anu suggestions or workarounds will be appreciated.

Note: Please suggest an alternate solution for this CORS issue from devServer, If setting allowedHosts is not the correct approach.

TIA

[dawnmist]

If I understand correctly, you are trying to access the urls in the browser from localhost:4000 which is proxying to localhost:3000, and the devserver at localhost:3000 is not permitting you access to the files from localhost:4000. Is that correct?

If that is correct, you can modify the devServer settings using the object format for config-overrides.js. If you are currently using the function format for react-app-rewired, move your existing function into the webpack field of the object.

module.exports = {
  webpack: /* the normal config-overrides.js function */
    (config, env) => {
      // whatever normal config changes you do for compiling your app here
      return config;
    },
  devServer: (configFunction) =>
    (proxy, allowedHost) => {
      // Create the default devServer config by calling configFunction with the 
      // CRA proxy/allowedHost parameters
      const devServerConfig = configFunction(proxy, allowedHost);

      // Set your customisation for the dev server
      devServerConfig.allowedHosts = [
        'localhost:4000'
      ];
      return devServerConfig;
    }
};

[pavanteja-potnuru]

First of all, thanks for the reply.

But here is my use case: I am trying to access URLs in the browser from localhost:4000 which is trying to consume files from the dev server let's say localhost:3000/demo.js. And I am able to fetch files.

In the same scenario, I am trying to call an API available at localhost:4012/orchestrate. Since I added proxy in the dev server package.json. So any paths missing from localhost:3000(devServer) will be redirected to localhost:4012(where app with APIs hosted).

The requirement is to use localhost:3000/orchestrate instead of localhost:4012/orchestrate in the browser which is loading content from localhost:4000. Here I am facing CORS issue.

Please let me know whether the solution given, solves the issue with the above scenario or not.

[dawnmist]

What are the full headers are you getting back for the OPTIONS request for the url with the CORS error?

[pavanteja-potnuru]

Here are the response headers from OPTIONS request

HTTP/1.1 200 OK
X-Powered-By: Express
Allow: GET,HEAD
Content-Type: text/html; charset=utf-8
Content-Length: 8
ETag: W/"8-ZRAf8oNBS3Bjb/SU2GYZCmbtmXg"
Vary: Accept-Encoding
Date: Fri, 09 Apr 2021 05:42:35 GMT
Connection: keep-alive
Keep-Alive: timeout=5

Ok, The request I am sending is with POST method. I found devServer allows GET and HEAD. How can I make devServer allow POST requests too?

[pavanteja-potnuru]

This issue is more related to webpack-dev-server repo. Found some alternate approaches in webpack-dev-server/issues/1440

Thanks for help @dawnmist. Closing this thread.