Доступ к XMLHttpRequest по адресу 'http://localhost:8000/api/auth/jwt/create/' из источника 'http://localhost:63342' был заблокирован политикой CORS:

Я пытаюсь подключить django и Vue API для входа в систему. Я использую JWT с простой библиотекой jwt и djoser, и я уже создал пользователя.

Как видите почтальон работает нормально. Кто-нибудь знает, как исправить эту ошибку?

enter image description here

Однако я не могу подключиться из index.html (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

В вашем списке промежуточного ПО не хватает нескольких строк. Замените его следующим образом в вашем 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

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