I ran into this cors issue when i deployed my django project which is using the django rest api and netlify for the frontend. I tried some of the solutions on here but nothing worked for me not even: CORS_ORIGIN_ALLOW_ALL = True Is there maybe something i'm missing on the frontend? Is there a way to get more details about what exactly the issue is? This only seems to happen on my upload form. (I added the code below) It works fine on on my local machine using docker.

Access to XMLHttpRequest at 'https://domain/dj-rest-auth/user/' from origin 'https://domain' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

patch https://domain/dj-rest-auth/user/ net::ERR_FAILED 400

import { useState } from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import axios from "axios"
import { API } from '../api'
import { useDispatch, useSelector } from "react-redux";
import { setInfo } from "../store/userInfoSlice";
import { Button, message, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import ImgCrop from 'antd-img-crop';

import {
    Spin
  } from 'antd';


export function Profile() {
    const info = useSelector((state) => state.userInfo.value);
    const accessToken = useSelector((state) => state.tokens.value.accessToken);
    const [loading, setLoading] = useState(false)
    const dispatch = useDispatch();

    const onUploadDraggerChange = ({ fileList: newFileList, file: resp }) => {
        setFileList(newFileList);
    
        if (!resp || !resp.response || !resp.response.profile) {
          return;
        }
    
        dispatch(setInfo(resp.response));
        message.success("Updated your profile picture")
      };

    const [fileList, setFileList] = useState([
        {
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: info.profile.avatar,
        },
      ]);

      const uploadDraggerrops = {
        name: 'profile.avatar',
        action: API.auth.userdetails,
        method: 'patch',
        listType: "picture-card",
        maxCount: 1,
        onChange: onUploadDraggerChange,
        fileList: fileList,
        headers: {
            "Authorization": `Bearer ${accessToken}`
        },
        withCredentials: true,
    };

    function handleSubmit(values) {
        setLoading(true)
        const data = new FormData()

        data.append("first_name", values.first_name || "");
        data.append("last_name", values.last_name || "");


        axios.patch(API.auth.userdetails, data, {
            headers: {
                "Authorization": `Bearer ${accessToken}`
            },
            withCredentials: true,
        })
            .then(res => {
                dispatch(setInfo(res.data));
                message.success("Updated your profile")
            })
            .finally(() => {
                setLoading(false)
            })
    }
    

    return (
        <div>
            {loading && (
                <Spin />
            )}
            {info && (
                <div>
                    <h1>Edit Profile</h1>
                    
                    <Formik
                        initialValues={{
                            
                            first_name: info.first_name,
                            last_name: info.last_name,
                        }}     

                        onSubmit={handleSubmit}>

                        {({ errors, touched }) => (
                            <Form>
                                <ImgCrop>
                            <Upload.Dragger {...uploadDraggerrops}>
                                <Button icon={<UploadOutlined />}>Click to Upload</Button>
                            </Upload.Dragger>
                            </ImgCrop>
                                <Field name="first_name">
                                    {({ field, form }) => (
                                        <label className="mt-3 block">
                                            <span className="text-gray-700">first name</span><br></br>
                                            <input
                                            {...field}
                                            type="text"
                                            className="
                                                mt-2
                                                block
                                                rounded-md
                                                border-gray-300
                                                shadow-sm
                                                focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                                            "
                                            style={
                                                form.touched.first_name && form.errors.first_name ? (
                                                    { border: '2px solid var(--primary-red)'}
                                                ) : null
                                            }
                                            />
                                        </label>
                                    )}
                                </Field>
                               <br></br>
                                <Field name="last_name">
                                    {({ field, form }) => (
                                        <label className="mt-3 block">
                                            <span className="text-gray-700">last name</span><br></br>
                                            <input
                                            {...field}
                                            type="text"
                                            className="
                                                mt-2
                                                block
                                                rounded-md
                                                border-gray-300
                                                shadow-sm
                                                focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                                            "
                                            style={
                                                form.touched.last_name && form.errors.last_name ? (
                                                    { border: '2px solid var(--primary-red)'}
                                                ) : null
                                            }
                                            />
                                        </label>
                                    )}
                                </Field>

                                <div className='editserror'><ErrorMessage name="AdministratorCell" /></div>
                                <div className="flex items-center">
                                <label className="mt-3 block">
                                </label>
                            </div>
                                <button type="submit" className="btn btn-g">Update</button>
                            </Form>
                        )}
                    </Formik>
                </div>
            )}
        </div>
    )

}

CodePudding user response：

Found the issue: It was caused by not capitalizing PATCH inside my JS. Apparently on localhost this was not an issue.