在 Heroku 上的 Django 应用中启用 CORS答案

【问题标题】：Enable CORS in Django app on Heroku在 Heroku 上的 Django 应用中启用 CORS
【发布时间】：2017-05-19 11:27:22
【问题描述】：

我正在尝试使用 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-middleware 不适用于 clickjacking 中间件，但它似乎无法正常工作。）

我正在使用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

【问题讨论】：

能否请您完成 MIDDLEWARE_CLASSES 的所有代码...中间件的顺序很重要。想看看你在哪里有 CorsMiddleware
@ChirdeepTomar 已编辑。
一切似乎都很好...您可以尝试使用本地 javascript 文件吗？

标签： django heroku cors django-cors-headers

【解决方案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>

【讨论】：