Разочаровывающая проблема Cors между django и react js

Итак, привет всем,

Я работаю над проектом, в котором есть django в качестве api и react js в качестве frontend, но я получаю эту раздражающую ошибку cors независимо от того, что я делаю, чтобы исправить это.

Я перепробовал все и все решения, которые я нашел, возможно, я делаю smtg неправильно, но одна мысль, которую я могу добавить, это то, что get работает идеально, как и ожидалось, но не post

Ваша помощь будет очень признательна. спасибо

Access to fetch at 'http://localhost:8000/Chercheur/Add' from origin 'http://localhost:3000' 
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect 
is not allowed for a preflight request.

Сторона Django

Settings.py :

Views.py :

from django.shortcuts import render


# My imports
from django.views.decorators.csrf import csrf_exempt
from rest_framework.response import Response
from rest_framework.decorators import api_view
from django.http import JsonResponse , HttpResponse
import json


# Models Imports
from .models import Chercheur , Person

import requests

# Create your views here.

@csrf_exempt
@api_view(['POST'])
def createChercheur(request):

urls.py :

from django.contrib import admin
from django.urls import path
from api_base import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('Chercheur/Add/', views.createChercheur),
    path('fetch/', views.Fetch)
]

** React JS Side : **

jsfile :

import {useState} from "react"

function Signup(){

    const [ Error , setError] = useState()

    const salt = bcrypt.genSaltSync(10)


    function getUserCred() {
        const User = {
            "Name": document.getElementById("FirstName").value + " " + document.getElementById("LastName").value,
            "Universite": document.getElementById("Universite").value,
            "Fonction": document.getElementById("Fonction").value,
            "Email": document.getElementById("Email").value,
            "Password": (document.getElementById("Password").value === document.getElementById("ConfirmPassword").value) ? bcrypt.hashSync(document.getElementById("Password").value, '$2a$10$CwTycUXWue0Thq9StjUM0u') : setError("Password Not matching !!"),
        };
    
        console.table(User)

        // fetch("http://127.0.0.1:8000/fetch/", {
        //     method: "GET", // Specify the method
        //     headers: {
        //         "Content-Type": "application/json"
        //     }
        // })
        // .then(res => res.json())
        // .then(res => alert(JSON.stringify(res)))
        // .catch(error => console.error('Error:', error));
      
        fetch('http://localhost:8000/Chercheur/Add', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(User),
        })
        .then(response => response.json())
        .then(data => {
          // Handle the response data
          console.log(data);
        })
        .catch(error => {
          // Handle any errors
          console.error(error);
        });
      }


    return ( ...

package.json :

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8000",
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bcrypt": "^5.1.1",
    "bcryptjs": "^2.4.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.24.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Вернуться на верх