[FIXED] how to solve CORS error in react and django

Issue

i am trying to creat log in app using Django and react .

my js :

const client = axios.create({
baseURL: "http://127.0.0.1:8000"});

//my submitRegistration function

function submitRegistration(e) {
e.preventDefault();
client.post(         //every time I got cors error here//      
  "/api/register",
  {
    email: email,
    username: username,
    password: password
  }
).then(function(res) {
  client.post(
    "/api/login",
    {
      email: email,
      password: password
    }
  ).then(function(res) {
    setCurrentUser(true);
  });
});}

django cors setup:

CORS_ALLOWED_ORIGINS = [
'http://localhost',
'http://127.0.0.1',
'http://0.0.0.0',      ]  CORS_ALLOW_CREDENTIALS = True

I dont know why I got cors error here.any suggestion please!

Solution

The CORS (Cross-Origin Resource Sharing) error typically occurs when making requests from a web application hosted on one domain to a server on another domain. In your case, it seems you are running your Django server on http://127.0.0.1:8000, and your React app is hosted on a different localhost port http://localhost:<your-react-port>. Also you need to ensure that you add the middleware class corsheaders.middleware.CorsMiddleware to listen in on responses:

CORS_ALLOWED_ORIGINS = [
    'http://localhost:<your-react-port>',
]

MIDDLEWARE = [
    ...,
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
    ...,
]

Answered By - Temi