Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

[slim-hmidi]

Describe the bug

I'm trying to access the Apis in my local server throug the react app and I got this issue:

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options.allowedHosts[0] should be a non-empty string.

Did you try recovering your dependencies?

8.3.1

Which terms did you search for in User Guide?

proxy in local environment

Environment

 System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.44)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: 5.0.0 => 5.0.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. Install http-proxy-middleware
2. Create setupProxy and add this code:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

3. npm start

Expected behavior

The app should be started normally.

Actual behavior

I got this error:

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options.allowedHosts[0] should be a non-empty string.

[Kais3rP]

I stumbled on the same error when updating to node 18.0.0, it works normally with node 17.0.0. #12316

[rexpan]

Workaround: set env DANGEROUSLY_DISABLE_HOST_CHECK=true

[JonathanSum]

Workaround: set env DANGEROUSLY_DISABLE_HOST_CHECK=true

Doesn't work.

[detj]

Getting this issue without configuring http-proxy-middleware.

To reproduce:

1. Run npx create-react-app some-app
2. Edit some-app/package.json to add "proxy": "http://localhost:4000"
3. Run HOST=something.local npm run start

You shall see the following logged in your terminal.

> [email protected] start
> react-scripts start

Attempting to bind to HOST environment variable: something.local
If this was unintentional, check that you haven't mistakenly set it in your shell.
Learn more here: https://cra.link/advanced-config

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options.allowedHosts[0] should be a non-empty string.

Configuration

[email protected]
[email protected]
[email protected]
[email protected]

[Kais3rP]

Getting this issue without configuring http-proxy-middleware.

To reproduce:

1. Run npx create-react-app some-app
2. Edit some-app/package.json to add "proxy": "http://localhost:4000"
3. Run HOST=something.local npm run start

You shall see the following logged in your terminal.

> [email protected] start
> react-scripts start

Attempting to bind to HOST environment variable: something.local
If this was unintentional, check that you haven't mistakenly set it in your shell.
Learn more here: https://cra.link/advanced-config

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options.allowedHosts[0] should be a non-empty string.

Configuration

[email protected]
[email protected]
[email protected]
[email protected]

Please can you try it with [email protected] ? Since I have the same issue with node@18 but not with node@17, so I assumed it was a problem only with node@18.

[detj]

Please can you try it with [email protected] ? Since I have the same issue with node@18 but not with node@17, so I assumed it was a problem only with node@18.

@Kais3rP Tried with [email protected]. Observed the same error. Find the full terminal output below.

/tmp
❯ npx create-react-app some-app

Creating a new React app in /private/tmp/some-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1381 packages in 11s

185 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated

added 39 packages in 2s

185 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1420 packages in 2s

185 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created some-app at /private/tmp/some-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd some-app
  npm start

Happy hacking!

/tmp 17s
❯ cd some-app/

/tmp/some-app master
❯ nvim package.json

/tmp/some-app master* 12s
❯ HOST=something.local npm run start

> [email protected] start
> react-scripts start

Attempting to bind to HOST environment variable: something.local
If this was unintentional, check that you haven't mistakenly set it in your shell.
Learn more here: https://cra.link/advanced-config

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options.allowedHosts[0] should be a non-empty string.

/tmp/some-app master* 6s
❯ node --version
v17.9.0

[JoshSharpe]

I don't know this code base so I could be way off. But it seems like it could be caused because

1. lanUrlForConfig becomes undefined in prepareUrls if a host is specified: https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/WebpackDevServerUtils.js#L66

2. The start config is then generated with that undefined as the second parameter: https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/scripts/start.js#L119

3. If a proxy isn't specified or that env is passed in then this is true, which avoid the bug: https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpackDevServer.config.js#L25

4. Else, if the proxy is set and that allowedHost parameter from step 2 is undefined, then this becomes [undefined] instead of the host because of the unset variable in step 1. https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpackDevServer.config.js#L46

[rosald]

i just reproduced this one. Steps to reproduce: 1 , npx create-react-app my-app1 2 , cd my-app1 3 , just add "proxy": "http://localhost:3008/" into package.json 4 , npm run dev , or npm start

environment is win10 , nodejs 16.15.1

[liurrong-ypwx]

same error， I don't know why, but it works . after eject, open file : webpackDevServer.config.js change allowedHosts: disableFirewall ? 'all' : [allowedHost], to allowedHosts: disableFirewall ? 'all' : "localhost"

[yuvadm]

Does anyone have a workaround for this that doesn't require downgrading?

[rexpan]

Does anyone have a workaround for this that doesn't require downgrading?

Try set DANGEROUSLY_DISABLE_HOST_CHECK = true.

[yuvadm]

@rexpan yeah that works, thanks!

[Bekhx]

Getting this issue without configuring http-proxy-middleware.

To reproduce:

1. Run npx create-react-app some-app
2. Edit some-app/package.json to add "proxy": "http://localhost:4000"
3. Run HOST=something.local npm run start

You shall see the following logged in your terminal.

> [email protected] start
> react-scripts start

Attempting to bind to HOST environment variable: something.local
If this was unintentional, check that you haven't mistakenly set it in your shell.
Learn more here: https://cra.link/advanced-config

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options.allowedHosts[0] should be a non-empty string.

Configuration

[email protected]
[email protected]
[email protected]
[email protected]

Did you find the answer to this?

[yuvadm]

Seems to be a duplicate of - or at least related to - #11762

[themw123]

is it still not fixed? I am using react 18.2.0 and react-dom 18.2.0 with this line in my package.json "proxy": "http://localhost:3000" and i am getting the same error as op. It is very strange because a day before it was working and now i am getting this error also with new react projects. Changing the versions of react does not help. Only changing the lines like in the commit of Manc is working for me.

Edit: Okay found out it only appers when connected to internet with public ip instead of a private nat ip.

[HarikrishnanBalagopal]

It is very strange because a day before it was working and now i am getting this error also with new react projects. 

I am getting the same behaviour. For me it was working on all my commits yesterday but today it fails with this error on the exact same commits. git status is clean on all the commits.

> react-scripts start

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options.allowedHosts[0] should be a non-empty string.
 ELIFECYCLE  Command failed with exit code 1.

The workaround mentioned works for me

DANGEROUSLY_DISABLE_HOST_CHECK=true pnpm start

Thanks @rexpan

[HarikrishnanBalagopal]

The issue seems to be occurring when you put

  "proxy": "http://localhost:8080",

in the package.json file.

Configuring the proxy middleware manually works fine https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

[Paradox369]

try removing the "proxy" key-value pair in your frontend's package.json. in your backend, npm install "cors" and use as a middleware. link to cors here: https://www.npmjs.com/package/cors

[uazure]

The issue seems to be occurring when you put

  "proxy": "http://localhost:8080",

in the package.json file.

Configuring the proxy middleware manually works fine https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

Even after creating setupProxy.js file it wasn't actually proxying. Digging deeper I found the root cause. For me the problem was also connected with the fact that backend app was listening on 127.0.0.1 while localhost on windows 10 was resolved to iv6 localhost address [::1] which is not the same. So specifying proxy host as http://127.0.0.1:8001 worked for me.

[masoi1289]

Workaround: set env DANGEROUSLY_DISABLE_HOST_CHECK=true

Work with me. Thanks

[mejl]

Does anyone have a workaround for this that doesn't require downgrading?

Try set DANGEROUSLY_DISABLE_HOST_CHECK = true.

I don't have that file webpackDevServer.config.js

I use vuejs and saw that this was for reactjs. Whoops.

[Khushahal007]

@JonathanSum Here is simple solution for this that you have to Delete "proxy": "http://localhost:6000". Install package http-proxy-middleware with command npm install http-proxy-middleware --save. Create a file setupProxy.js inside your src folder. Add these lines inside:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:6000', changeOrigin: true, }) ); };

[ShuriginAleksey]

Попробуйте вместо localhost вставить 127.0.0.1 У меня работает, но требует online интернет. В offline не работает. А мне нужен offline.

[uazure]

@ShuriginAleksey it'd be nice to keep conversation in a language that most people here can understand. Some translation services might help with that

[ShuriginAleksey]

@uazure it'd be nice to keep conversation in a language that most people here can understand. Some translation services might help with that

Replace Localhost with 127.0.0.1 in the package.json file. Who needs to solve the problem, translate from my language to any other than I will city it is unclear what with the help of the translator. I hope this replica translator will bring you normal?

[Ender-Wang]

Allow cors on the server side to tick this problem. I was using a chrome extension CORS to bypass it.

[Hexvortex]

Delete "proxy": "http://localhost:6000" from package.json. Install package http-proxy-middleware with command npm install http-proxy-middleware --save. Create a file setupProxy.js inside your src folder or the root of your folder. Add these lines inside:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:6000', changeOrigin: true, }) ); };

Now it will work .Well it worked for me :)

[Priyankh2]

i just reproduced this one. Steps to reproduce: 1 , npx create-react-app my-app1 2 , cd my-app1 3 , just add "proxy": "http://localhost:3008/" into package.json 4 , npm run dev , or npm start

environment is win10 , nodejs 16.15.1

I do same thing but i got sams error

[smarzism]

First i changed my package.json in my react project. I deleted the "proxy": "https://localhost:5000/" and instead of that added this

"options": {
"allowedHosts": ["localhost", ".localhost"],
"proxy": "https://localhost:5000/"
}

It worked but another problem occurred. Then i downgrade my "react-scripts" from 5.0.1 to 4.0.3 . It worked perfectly. npm install [email protected]