React Django CORS не работает: заблокирован политикой CORS - PullRequest
Новая
       55

React Django CORS не работает: заблокирован политикой CORS

0 голосов
/ 12 февраля 2020

Я перепробовал все возможные комбинации CORS между реакцией и django API. это все еще не работает.

я получаю эту ошибку 

 has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

settings.py 

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

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    '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',
]

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = False

view.py 

class StuffViewSet(APIView):

    def post(self, request):
        serializer = StuffSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(data = "data saved", status=status.HTTP_201_CREATED)
        return Response(data = "data not saved", status=status.HTTP_400_BAD_REQUEST)

    def get(self, request):
        snippets = Stuff.objects.all()
        serializer = StuffSerializer(snippets, many=True)
        return Response(data = json.dumps(serializer.data))

I я вызываю API от реакции, как это 

getAPI(e) {
    const headers = {
        'Content-Type': 'application/json',
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET,OPTIONS,POST,PUT"
    }
    axios.get('http://localhost:8000/api', {
        headers: headers
        }).then(function(response) {
            console.log("/api")
            console.log(response.data)
    });
}

что я тут не так сделал?

1 Ответ

0 голосов
/ 12 февраля 2020

Попробуйте только тип контента из внешнего интерфейса, 

getAPI(e) {
    const headers = {
        'Content-Type': 'application/json'
    }
    axios.get('http://localhost:8000/api', {
        headers: headers
        }).then(function(response) {
            console.log("/api")
            console.log(response.data)
    });
}
...