Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"options.allowedHosts[0] should be a non-empty string." when adding proxy to package.json in ReactJS [duplicate]

Tags:

reactjs

I was following a tutorial for React.js and Django Rest Framework (https://www.youtube.com/watch?v=tYKRAXIio28&ab_channel=DennisIvy), then on 1:18:10 (Frontend part) he added proxy to the package.json in root folder and everything was working fine. But then when I did the same I came across a problem, when I tried to do npm start it gives me back 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.

My package.json look like this

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

I tried searching the answer on my own and the closest one I found is https://stackoverflow.com/questions/70387809/reactjs-server-is-not-starting-while-using-proxy-api which, as you can see, it was voluntarily removed by its author. Another one I found is https://gitmemory.cn/index.php/repo/facebook/create-react-app/issues/11762 talking about HOST in .env file have conflict error ( I don't really understand since I'm quite new to this stuff ). But I do not have .env file.

I've also tried React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:8000 (ECONNREFUSED) by doing

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

which doesn't seem to have any effect.

I've confirmed that the problem is indeed proxy because the problem don't occur when I remove this line and the app runs properly.

I believe options.allowedHosts should be set to an array which I have no idea what to put and where to put it so if you understand the problem please be kind and elaborate on that, thank you.

Also, http://127.0.0.1:8000 is my localhost for django backend, in case that help.

Edit 1: Tried

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

and

"proxy": "http://127.0.0.1:8000",
"private":false,

Both of them didn't work

TLDR; proxy in package.json broke my React app pls send help

Note: This is my first time asking question on stackoverflow so I apologize if the question is stupid or I asked something wrong.

like image 564
WingedSeal Avatar asked Nov 05 '22 23:11

WingedSeal


1 Answers

I am facing the same problem. But my problem exist when I am not connected to the internet. When I connect to the internet, the dev server starts with the command yarn start or npm start.

like image 189
v2kaj Avatar answered Nov 24 '22 08:11

v2kaj