CORS策略已阻止從源“http://localhost:63342”訪問“http://localhost:8000/api/auth/jwt/create/”處的XMLHttpRequest：

我正在嘗試連接 django 和 Vue API 以登錄。我正在將 JWT 與簡單的 jwt 和 djoser 庫一起使用，并且我已經創建了用戶。

正如你所看到的郵遞員，它作業正常。有誰知道如何解決這個錯誤？？

但是，我無法從 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

uj5u.com熱心網友回復：

您的中間件串列中缺少一些行。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',
]

另外，我認為您通過 using 使用舊屬性CORS_ORIGIN_ALLOW_ALL。改用這個：

CORS_ALLOW_ALL_ORIGINS = True

如果您有任何問題，請記住，檔案就在這里：https ://github.com/adamchainz/django-cors-headers

標籤：Python django 阿贾克斯 api

上一篇：getBoundingClientRect()的問題

下一篇：SQL連接并獲取主表中不存在的所有資料