在Heroku上的Django应用程序中启用CORS

时间:2017-01-05 02:02:47

标签: django heroku cors django-cors-headers

我尝试使用django-cors-middleware在Heroku上托管的基于Django的API中允许跨源资源共享。我已按照settings.py中指定的设置进行操作,即:

INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE_CLASSES = [
    '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.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

(我显示'django.middleware.clickjacking.XFrameOptionsMiddleware',因为我在另一篇SO帖子中读到django-cors-middlewareclickjacking中间件无关,但它似乎无论如何都无法正常工作。)

我正在使用https://resttesttest.com进行测试。当我发出请求时,它会吐出:Oh no! Javascript returned an HTTP 0 error. One common reason this might happen is that you requested a cross-domain resource from a server that did not include the appropriate CORS headers in the response

1 个答案:

答案 0 :(得分:1)

@ChirdeepTomar,是的,这在本地测试时有效。我不确定为什么它不能与resttesttest.com一起使用。有一个非常棒的小程序用于在本地测试CORS,我发现here,为方便起见,已在下面进行了再现:

<html> 
<head>     
<title>Test for CORS</title>     
<script type="text/javascript"> 
function testcors(url){             
    var createCORSRequest = function(method, url) {                 
        var xhr = new XMLHttpRequest();                 
        if ("withCredentials" in xhr) {                     
            xhr.open(method, url, true);                 
        } 
        else if (typeof XDomainRequest != "undefined") {                                       
            xhr = new XDomainRequest();                     
            xhr.open(method, url);                 
        } 
        else {                                          
            xhr = null;                 
        }                 
        return xhr;             
    };              
    var method = 'GET';             
    var xhr = createCORSRequest(method, url);              
    xhr.onload = function() {                            
        thendothis(true); //success            
    };              
    xhr.onerror = function() {                 // Error code goes here.                 
        thendothis(false);             
    };              
    xhr.send();             
    return iscors;         
}          
function thendothis(iscors){             
    var resptxt = "No";             
    if (iscors) { resptxt = "Yes"; }             
    document.getElementById("res").innerHTML = resptxt;        
}          
function runtest(frm){             
    testcors(frm.url.value);         
}     
</script> 
</head> 
<body>     
    <form>         
        URL: <input type="text" name="url" id="url" style="width:500px" /></br>         
        <input type="button" value="Test if CORS" onclick="runtest(this.form)" />     
    </form>     
    <div>URL is CORS: <span id="res"></span></div> 
</body> 
</html>