create-react-app: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

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:)

Install http-proxy-middleware
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,
    })
  );
};

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.

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 6
Comments: 29

Commits related to this issue

Add proxy workaround due to https://github.com/facebook/create-react-app/issues/12304 — committed to yuvadm/geshem.space by yuvadm 2 years ago
Fix proxy config Closes #1300 Apply fix from https://github.com/facebook/create-react-app/issues/12304#issuecomment-1486249284 setupProxy.js was already present — committed to uellue/LiberTEM by uellue a year ago
Fix proxy config Closes #1300 Apply fix from https://github.com/facebook/create-react-app/issues/12304#issuecomment-1486249284 setupProxy.js was already present — committed to LiberTEM/LiberTEM by uellue a year ago

Most upvoted comments

Workaround: set env DANGEROUSLY_DISABLE_HOST_CHECK=true

+72

rexpan on May 7, 2022

Getting this issue without configuring http-proxy-middleware.

To reproduce:

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

You shall see the following logged in your terminal.

> some-app@0.1.0 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

node@16.15.0
npm@8.5.5
create-react-app@5.0.1
react-scripts@5.0.1

detj on May 29, 2022

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”

liurrong-ypwx on Jun 27, 2022

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.

themw123 on Oct 25, 2022

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

HarikrishnanBalagopal on Jan 12, 2023

Workaround: set env DANGEROUSLY_DISABLE_HOST_CHECK=true

Doesn’t work.

JonathanSum on May 12, 2022

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

Kais3rP on Apr 23, 2022

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

Ender-Wang on May 18, 2023

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 on Jan 10, 2023

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

rosald on Jun 13, 2022