Django/React request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response

Question

I am building a website using Django as purely a server and React. I am getting the error

Access to XMLHttpRequest at 'http://localhost:8000/dividends/current_yield/hd' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

so far I've tried Redirect is not allowed for a preflight request and "No 'Access-Control-Allow-Origin' header is present on the requested resource" in django

I added corsheaders to my installed apps in Django, and still no luck

my app.js looks like

import React from 'react';

import SearchBar from './SearchBar';

import axios from 'axios';


class App extends React.Component {

  onSearchSubmit(term) {
    axios.get('http://localhost:8000/dividends/current_yield/hd', {
      // params: {query: term},
      headers: {
        // Authorization: 'Client-ID *YOUR KEY HERE*'
        // "Access-Control-Allow-Origin": "*",
      }
    }).then(response => {
      console.log(response.data.results);
    });
  }

  render() {
    return (
      <div className="ui container" style={{marginTop: '10px'}}>
        <SearchBar onSubmit={this.onSearchSubmit} />
      </div>
    )
  }
}


export default App;

My views looks like:

def current_dividend_yield_view(request, ticker):
    yahoo_stock_obj = yfinance.Ticker(ticker.upper())
    price = get_current_price(yahoo_stock_obj)
    dividends = get_all_dividends(yahoo_stock_obj)
    current_yield = get_current_dividend_yield(price, dividends)
    current_yield_object = {'current_yield': current_yield}
    data = json.dumps(current_yield_object)
    return HttpResponse(data, content_type='application/json')

My settings.py:

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'dividends_info.apps.DividendsInfoConfig',
    
    'corsheaders',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',

    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',

    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]


""" custom settings below here """

CORS_ORIGIN_ALLOW_ALL = True

# https://stackoverflow.com/questions/53215045/redirect-is-not-allowed-for-a-preflight-request
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

For some reason the answers regarding Django didn't help me. I now know this is server-side issue only and giving headers from the Axios request won't help.

Answer 1

You need to modify your settings.py to allow your frontend to access the service via CORS, make sure to add your correct frontend port:

# Add here your frontend URL
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]