CORS 策略已阻止从来源 'http://localhost:63342' 访问位于 'http://localhost:8000/api/auth/jwt/create/' 的 XMLHttpRequest：

Question

我正在尝试连接 django 和 Vue API 以登录。我正在将 JWT 与简单的 jwt 和 djoser 库一起使用，并且我已经创建了用户。

正如邮递员所见，一切正常。有谁知道如何解决这个错误？？

但是，我无法从 index.html (ajax)

连接

这是ajax。

....
            var app = new Vue({
                el: '#app',
                data: {
                    email: '',
                    password: ''
                },
                mounted: function() {},
                methods: {
                    login(){
                        if (this.email == ''||this.password == '') {
                            alert("Email or password cannot be empty");
                            location. reload();
                        } 
                        var data_l = {};
                        data_l.email = this.email;
                        data_l.password = this.password;
                        var formData = JSON.stringify(data_l);
                        console.log(formData);
                        $.ajax({
                            url: "http://localhost:8000/api/auth/jwt/create/",
                            type: "post",
                            dataType: "json",
                            data: formData,
                            contentType: "application/json",
                            success: function(rs) {
                                console.log(rs);
                                if (rs.code == "0") {
                                    console.log(rs);
                                    alert("Login successful!");
                                    window.location.href = "";
                                } else {
                                    alert(rs.msg);
                                }
                            },
                            error: function() {}
                        });
                    },
                    jump_to_signup() {
                        window.location.href = "signup.html";
                    },
                    jump_to_Fpwd(){
                        window.location.href = "forgotpassword.html";
                    }
                }
                    
            })
        </script>
    </body>
</html>

这是settings.py


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

    'rest_framework',
    'rest_framework.authtoken',
    'corsheaders',
    'djoser',

    'fitness_app',
    'user',
]

MIDDLEWARE = [
    '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',
]

ROOT_URLCONF = 'fitness.urls'

CORS_ORIGIN_ALLOW_ALL = True

Answer 1

您的中间件列表中缺少一些行。在您的 settings.py 文件中像这样替换它：

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    '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 时使用的是旧属性。改用这个：

CORS_ALLOW_ALL_ORIGINS = True

如果您有任何问题，请记住，文档就在这里：https://github.com/adamchainz/django-cors-headers

CORS 策略已阻止从来源 'http://localhost:63342' 访问位于 'http://localhost:8000/api/auth/jwt/create/' 的 XMLHttpRequest：

Access to XMLHttpRequest at 'http://localhost:8000/api/auth/jwt/create/' from origin 'http://localhost:63342' has been blocked by CORS policy:

python

api

django

ajax