React working on local machine but not on other local network machine

Question

I am hosting a reactjs project on port 3000 as front end and django project on port 8000 as backend on the same machine.

So when rendering, reactjs will get data by calling django APIs.

I (thought I) had correctly setup CORS headers in Django settings. Both http://localhost:3000/ and http://192.168.86.21:3000/ are working on my local machine. 192.168.86.21 is my LAN IP.

But when I access http://192.168.86.21:3000/ on another machine or tablet in my LAN. Only static files are rendered. I inspect Chrome network and it shows:

" Access to fetch at '..django_ip_port...' from origin '..my_ip_port..' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. "

It's really weird.

Can you give some details about the CORS headers configurations you have done on django side? — Mika Andrianarijaona, Dec 10 '21 at 20:58
I don't know much django but it seems to have all required headers. If you try to call directly the API fron the other devices (not throught the react app), do you get any response with headers? i.e calling http://192.168.86.21:8000/ — Mika Andrianarijaona, Dec 10 '21 at 21:25
It's working when calling 192.168.86.21:8000(django) and it's working when calling 192.168.86.21:3000(reactjs) on the local machine. But 192.168.86.21:3000 is not working when calling from a tablet in the same LAN. Only static files shows up, db can't be reached. — Harvey Dent, Dec 10 '21 at 21:51
You can also check this answer from another post that might be helpful https://stackoverflow.com/a/53125071/903564 — Mika Andrianarijaona, Dec 10 '21 at 21:56

React working on local machine but not on other local network machine

0 Answers0