數字海洋NGINX和Gunicorn上的CORS標頭訪問控制缺少Django

Question

控制台中的響應：-

跨域請求被阻止：“同源起源”策略不允許在https://blissedmaths.sgp1.digitaloceanspaces.com/media/topics/4276769703/4276769703.svg上讀取遠程資源。 （原因：CORS標頭“ Access-Control-Allow-Origin”缺失）。

我有django-cors-headers用戶，這是一個Django應用程序，向響應添加了CORS（跨源資源共享）標頭。

我的setting.py文件是

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

    'corsheaders',
    'students',
    'commons',

]

         CORS_ORIGIN_ALLOW_ALL = True
    CORS_ALLOW_CREDENTIALS = True
    CORS_ALLOW_METHODS = (
        'DELETE',
        'GET',
        'OPTIONS',
        'PATCH',
        'POST',
        'PUT',
    )
    CORS_ALLOW_HEADERS = (
        'accept',
        'accept-encoding',
        'authorization',
        'content-type',
        'dnt',
        'origin',
        'user-agent',
        'x-csrftoken',
        'x-requested-with',
    )

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',

    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

從數字海洋空間給我錯誤的圖像是

   <script>
                function fetchXML(url, callback) {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.withCredentials = true;
                xhr.setRequestHeader('Access-Control-Allow-Origin' , '*');
                console.log(xhr.getAllResponseHeaders)
                xhr.onreadystatechange = function (evt) {
                //Do not explicitly handle errors, those should be
                //visible via console output in the browser.
                if (xhr.readyState === 4) {
                    callback(xhr.responseXML);
                }
                };
                xhr.send(null);
                };


                    fetchXML("{{a.image.url}}",function(newSVGDoc){
                    //import it into the current DOM
                    var n = document.importNode(newSVGDoc.documentElement,true);
                    document.querySelector('.{{a.topic|slugify}}-image').appendChild(n);
                        }); 



            </script>

該頁面位於https://blissedmaths.com/myclassroom/polynomial/

我已經添加了set.py所需的所有文件，但仍然沒有頭文件。 我也嘗試Jquery和AJAX。 但是沒用。

如何解決這個問題。 是否還需要一些JavaScript或僅此后端就足夠了？

我也嘗試通過Nginx conf添加標頭。 但是沒有用。 如何通過python代碼或Jquery / JS或服務器配置文件解決此問題。 實際上沒有方法對我有用。 但是圖像是從源頭來的。 請為此提供修復程序。

Answer 1

您在設置文件中有兩個“ django.middleware.common.CommonMiddleware”。 CorsMiddleware應該放置在盡可能高的位置，尤其是在可以生成響應的任何中間件之前，例如Django的CommonMiddleware