"options.allowedHosts[0] should be a non-empty string." when using PROXY with REACT and Django as backend in LOCALHOST

Question

im facing error while im trying to use proxy in package.json on react app and connect to django backend api in local host but when i tried to npm start i get 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.

i tried all these steps as shown below and nothing worked pls help.

1- I tried to set HOST in .env file to http://127.0.0.1:8000 but it didnt work!

2- I've tried:

"proxy": "http://django:8000",

it changed nothing !!!

then i found a workaround by using the http-proxy-middleware from: https://sunkanmi.hashnode.dev/how-to-setup-proxy-in-react-with-http-proxy-middleware

but i am not looking for a workaround !!!

My package.json look like this

{
  "name": "frontend",
  "version": "0.1.0",
  "proxy": "http://127.0.0.1:8000",
  "private": true,
  "dependencies": {

3- i have also tried:

"proxy": "http://127.0.0.1:8000",
"allowedHosts": [
    "127.0.0.1"
  ],
"private":true,

didn't work !!!

4- i tried changeing http://127.0.0.1:8000 to http://localhost:8000 didnt work!

5- i tried changeing allowed host in django seetings.py to ['*'] and ['http://127.0.0.1:8000', 'http://localhost:8000'] didnt work !

6- i tried changeing

CORS_ALLOW_ALL_ORIGINS

to True and then changing it to

CORS_ALLOWed_ORIGINS = [
    
    'http://localhost:3000'
]

didnt work!!!

Answer 1

🦋 Butterfly 🦋

after some searching and changeing some stuff i figured out that when you want to use proxy in the react app if you are connected to a vpn you most disconnect from it to get the react server running :)

simplest things can take a lots of time from you in this job