Enable CORS in Django app on Heroku

Question

Enable CORS in Django app on Heroku

2.7k views Asked by cph2117 At 18 September 2024 at 08:25

I'm attempting to use django-cors-middleware to allow cross-origin resource sharing in my Django-based API hosted on Heroku. I've followed the setup specified in my settings.py, namely:

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

(I show 'django.middleware.clickjacking.XFrameOptionsMiddleware' because I read in another SO post that django-cors-middleware doesn't work with clickjacking middleware, but it doesn't seem to work either way.)

I'm using https://resttesttest.com to test. When I make the request it spits out: 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

Original Q&A

There are 1 answers

**cph2117** · Answer 1 · 2017-01-05 06:43:58

@ChirdeepTomar, yes this worked when testing locally. I'm unsure why it didn't work with resttesttest.com. There is a fantastic applet for testing CORS locally that I found here, and have reproduced below for convenience:

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

TechQA.

Enable CORS in Django app on Heroku

There are 1 answers

Related Questions in DJANGO

Related Questions in HEROKU

Related Questions in CORS

Related Questions in DJANGO-CORS-HEADERS

Popular Questions

Popular Tags

Trending Questions