Access to XMLHttpRequest at 'http://127.0.0.1:8000/login/' from origin 'http://localhost:3000' has been blocked by CORS policy

full error: Access to XMLHttpRequest at 'http://127.0.0.1:8000/login/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response. settings.py:

CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',
]
CORS_ALLOW_HEADERS = ['*']




INSTALLED_APPS = [
    'django_debugger',
    'django_extensions',
    'corsheaders',
    'rest_framework',
    'main',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

in react (frontend side):

function Login(){
    const [login,setLogin] = useState({
        email: '',
        password:''
    });
    const { email, password } = login;
    function handleChange(e){
        console.log(e.target.value);
        setLogin({
            ...login,
            [e.target.name]: e.target.value
        });

    }
    function handleSubmit(e){
        e.preventDefault();
        axios.post(' http://127.0.0.1:8000/login/',login, {withCredentials:true})
}

my authentication method is using sessions, I am not sure how to fix this CORS problem

Back to Top