React app can't reach to backend python application on localhost on same server-CodePudding

I have a public cloud VM which has public IP say 160.159.158.157 (this has a domain registered against it). I have a Django application (backend) which is CORS-enabled and serves data through port 8080. I have a React app running on the same VIM on a different port (3000), which is accessing the Django app and is supposed to produce a report.

The problem is that, when I use http://<domain-name>:8080/api/ or http://<public-ip>:8080/api/, my application is working fine, but when I try to fetch data from localhost like http://localhost:8080/api/ or http://127.0.0.1:8080/api/, the React app fails to fetch data with the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8080/api/. (Reason: CORS request did not succeed). Status code: (null).

Here's what I've tried:

axios.get(baseURL, { headers: { 
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
}

but it didn't work. What should I do?

CodePudding user response：

Looks like you've gotten confused where those headers need to be. You're setting them on the request to the backend, but they need to be set on the response from the backend. After all, it wouldn't be very good security if someone making a request could simply say "yeah, I'm ok, you should trust me".

The problem is going to be somewhere in your backend Django app, so double check the CORS config over there.

CodePudding user response：

have tried so much to digest this but somehow look complicated to me but with a lot of research i come up with this link, check if it can make relevant to the issue click link description here