Python Django，Next.JS:CORS头&x2018；访问控制允许原点’；缺少，即使定义了django CORS标头，CORS请求也未成功

我一直在用Django和Next.JS处理旧的、令人困惑的CORS问题。 我的设置： 操作系统：Windows 10，浏览器：Mozilla:84.0.2（64位），Django:3.1，Next.JS:10

我的Django设置：

INSTALLED_APPS = [
    ...
    'corsheaders',
    'rest_framework',
    'my_app',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ],
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ],
}

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',
]

CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True

URL.py：

from rest_framework_simplejwt.views import (
    TokenObtainPairView,
    TokenRefreshView,
)

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('my_app.urls')),
    path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
    path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
]

My Next.js页面：

import { useState } from 'react';
import axios from 'axios';

export default function loginForm() {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = () => {
       const headers = {
        "Content-Type": "application/json",
        "Accept": "application/json"
      }
       return axios({
            method: "POST",
            url: "http://127.0.0.1:8000/api/token/",
            data: {
                username: username,
                password: password
             },
             headers: headers
        })
        .then(function (response) {
            console.log(response);
        })
        .catch(function (response) {
            console.log(response);
        });
    };

    return (
        <div className="loginBox">
            <div className="lblBox">
                <label className="label" htmlFor="loginbox">
                    Enter Username and Password
                    <div className="unameInput">
                        <input 
                            type="text"
                            name="username"
                            placeholder='Enter username'
                            onChange={e => setUsername(e.target.value)}
                        />
                    </div>
                    <div className="passwordInput">
                        <input 
                            type='password'
                            name='password'
                            placeholder='Enter password'
                            onChange={e => setPassword(e.target.value)}
                        />
                    </div>
                    <div className="submitBtn">
                        <button onClick={handleSubmit} name='submit'>Submit</button>
                    </div>
                </label>
            </div>
        </div>
    );
}

这是Django命令行中的输出：

[14/Jan/2021 12:47:56] "OPTIONS /api/token/ HTTP/1.1" 200 0
[14/Jan/2021 13:09:20] "OPTIONS /api/token/ HTTP/1.1" 200 0
[14/Jan/2021 13:26:46] "OPTIONS /api/token/ HTTP/1.1" 200 0

这是控制台中的XHR标头：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/token/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/token/. (Reason: CORS request did not succeed).

GET  http://127.0.0.1:3000/_next/static/webpack/4bc7d30193ea5b40fd0f.hot-update.json
Status  200 OK
Version  HTTP/1.1
Transferred  392 B (71 B size)
Referrer Policy  no-referrer-when-downgrade

响应头

Accept-Ranges: bytes
Cache-Control: public, max-age=0
Connection: keep-alive
Content-Length: 71
Content-Type: application/json; charset=UTF-8
Date: Thu, 14 Jan 2021 07:58:35 GMT
ETag: W/"47-176ffe6686d"
Keep-Alive: timeout=5
Last-Modified: Thu, 14 Jan 2021 07:57:38 GMT
Vary: Accept-Encoding

请求头

Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.5
Connection: keep-alive
Cookie: csrftoken=......
DNT: 1
Host: 127.0.0.1:3000
Referer: http://127.0.0.1:3000/login
Sec-GPC: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:84.0) Gecko/20100101 Firefox/84.0

我从各个环节尝试了许多解决方案，但都没有奏效。我一次又一次地犯同样的错误。但它正在处理GET请求

---

请帮忙

您是否尝试添加

http://127.0.0.1:8000

或

http://127.0.0.1:3000

到

允许的原产地
？

这似乎只是来自
http://localhost:3000
将被接受。
我不知道怎么做，但这次在添加这个：
http://127.0.0.1:3000
到
CORS\u允许的\u来源
列表！！