Allowing CORS in Django app with a React frontend

[Dexty]

I have a Django app with a React frontend but I can't make requests. I've tried with fetch and axios to post requests to an endpoint from a login form but the error persists. I''ve also installed django-cors-headers but with the same result. Don't know why CORS isn't enabled despite the settings.

Here is the error from the console:

Error:
Access to XMLHttpRequest at 'https://some-api-endpoint/' from origin 'http://localhost:7000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. POST https://some-api-endpoint/ net::ERR_FAILED 

Here's the project tree:

Output:
|_______app
|_______myProject
|_______reactFolder
|_______static
|_______templates
manage.py
requirements.txt

Here's the settings.py:

ALLOWED_HOSTS = ['*']
INSTALLED_APPS = [
        ...
        'corsheaders',
]
MIDDLEWARE = [
        'corsheaders.middleware.CorsMiddleware',
        ...
]
CORS_ORIGIN_WHITELIST = [
        'http://127.0.0.1:7000',
        'http://localhost:3000',  
]
CORS_ALLOWED_ORIGIN_REGEXES = [
        'http://localhost:3000',
        'http://127.0.0.1:7000',
        'https://some-api-endpoint.com',
]
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_HEADERS = [
        'accept',
        'accept-encoding',
        'authorization',
        'content-type',
        'dnt',
        'origin',
        'user-agent',
        'x-csrftoken',
        'x-requested-with',
]

The React component:

class Login extends Component {
            constructor(props) {
                              super(props)
                              this.state = {
                                user_name: '' ,
                                password: '',   
                              }}
            changeHandler = (e) => {
                   this.setState({[e.target.name]: 
                    e.target.value})  
                }

            submitHandler = e => {
                e.preventDefault()
                console.log(this.state)
                axios.post('https://some-api-endpoint/', this.state, 
                   {headers: { 
                        'Access-Control-Allow-Origin': '*', 
                        'Access-Control-Allow-Headers' : 'Origin, X-Requested-With,                Content-Type, Accept'}}).then(
                     response => {
                        console.log(response)
                     }).catch(error => {
                        console.log(error) }) }

                render() {
                    const {user_name, password} = this.state
                    return(
                        <form onSubmit={this.submitHandler}>
                         <input type='text' name='user_name' value={user_name} onChange={this.changeHandler} />
                         <input type='password' name='password' value={password} onChange={this.changeHandler} /> 
                         <button type='submit'>Submit</button> 
                      </form>
)}
}

export default Login;

Larz60+ write Dec-23-2021, 01:00 AM:
Please see: BBCode.
Code repaired for you this time.
Note: used python tags for react, which formats better than quotes