Django backend не принимает запросы get от моего front end

Я использую React в качестве front end и Django в качестве backend когда я перехожу на бэкенд URL: localhost:8000, он отображает все данные в JSON, и если я использую Insomnia/Postman для получения и отправки запросов, это работает

Однако фронтенд не работает, я получаю

Access to XMLHttpRequest at 'http://127.0.0.1:8000/cluster/' from origin 'http://localhost:3000' 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.

Я читал другие статьи на этом сайте, и все они говорили, что нужно добавить @csrf_exempt, а у меня это уже есть, и я все еще получаю проблемы.

settings.py

CORS_ORIGIN_ALLOW = True
CORS_ORIGIN_ALLOW_ALL = True

views.py

@csrf_exempt
def clusterAPI(request, title=''):
    if request.method=='GET':
        clusters = reactUICluster.objects.all()
        clusterSerializer = reactUIClusterSerializer(clusters,many=True)
        return JsonResponse(clusterSerializer.data, safe=False)
    elif request.method=='POST':
        clusterData = JSONParser().parse(request)
        clusterSerializer = reactUIClusterSerializer(data = clusterData)
        if clusterSerializer.is_valid():
            clusterSerializer.save()
            return JsonResponse("Added Successfully", safe=False)
        return JsonResponse("Failed To Add", safe=False)
    elif request.method=='DELETE':
        cluster = reactUICluster.objects.get(title=title)
        cluster.delete()
        return JsonResponse("Deleted Object", safe=False)

вызовaxios внутри моего front end

const config = {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,PATCH,OPTIONS"
  }
};
    const axiomCall = async () => {
            console.log("FF");
           const temp = await axios.get("http://127.0.0.1:8000/cluster/", config)
           setRow(temp)
            
            };

Также в этой статье говорится об использовании app.use(cors), однако, поскольку у меня нет метода app.use(), я не могу этого сделать

import './App.css';
import React, { Component } from "react";
//import axios from "axios";
import RefreshList from './comps/comp1';

function App() {
  
  return (
    <div>
    <RefreshList></RefreshList>
    
    
    </div>
    
  );
}
export default App;

Следуя этим шагам, я получил следующие результаты:

  1. Установите Django CORS

    . 
    pip install django-cors-headers

  2. Добавьте его в INSTALLED_APPS (settings.py):

    INSTALLED_APPS = [
    ...
    'corsheaders',
]

  3. Добавьте его сверху на MIDDLEWARE (settings.py):

    MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

  4. Переменная CORS может быть такой (settings.py):

    CORS_ORIGIN_ALLOW_ALL = True
# or: 
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
  'http://localhost:3000', # or the reactjs address being used
)

  5. Очистите кэш веб-браузера (Empty Cache и Hard Reload - для chrome) и перезапустите приложение .

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