Forums

django-cors-headers and No 'Access-Control-Allow-Origin'

Hi, I developed a simple mobile app on my local computer and am trying to access my django backend hosted on pythonanywhere.

I am getting the following errors:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.0.11:8105' is therefore not allowed access. The response had HTTP status code 401.

failed to load resource: the server responded with a status of 401 (Authorization Required)

defaultErrorLogger @ core.js:1449

After doing a little research I did the following:

pip install django-cors-headers

I added it to my install apps: INSTALLED_APPS = ( ... 'corsheaders', ... )

And to the top of my middleware classes:

MIDDLEWARE_CLASSES = ( 'corsheaders.middleware.CorsMiddleware',

And I put my remote access url into CORS_ORIGIN_WHITELIST and when that didn't work also tried CORS_ORIGIN_ALLOW_ALL but no matter what I do I still get the error.

Not sure if it's related to anything with pythonanywhere or not.

When you say you have a mobile app- is this an android/iphone app? Or is it some sort of local web app?

Is the "No Access-Control-Allow-Origin header" error something your browser gives back to you? Or is it something coming from the PythonAnywhere server?

Is 192.168.0.11:8105 your local computer/local mobile app? That does not seem like the correct IP (it's a private IP that's not accessible outside of your network)

Hi, yes, it's http://192.168.0.11:8105. I'm trying to use ionic (a hybrid platform for android and ios). I first tried installing it under my virtualenv on pythonanywhere (I had some trouble with that and raised the following issue: https://www.pythonanywhere.com/forums/topic/13110/#id_post_51296). I was able to get it resolved and installed but then when I tried to run ionic serve it gave me the following addresses but neither worked in a browser:

Local: http://localhost:8100 External: http://10.0.0.78:8100

But then someone else's answer was I should do it on a local computer and not pythonanywhere so I tried that and was given the following addresses:

Local: http://localhost:8105 External: http://192.168.0.11:8105

which I was able to open in a browser but I can't http to my django app on pythonanywhere.

I've never created a mobile app before so I may be going about it all wrong, not sure. I'm just trying to create a prototype for a mobile app at this point but I'm having trouble being able to communicate with my django backend that is on pythonanywhere. And I'm not sure where I should be building the code for the mobile app, on pythonanywhere or elsewhere but I can't seem to get either to work.

Any help is greatly appreciated! thank you!

ok so just to clarify, you should probably use ionic on your local machine, and use pythonanywhere for the django web backend that your mobile app connects to.

for your mobile app to connect to a pythonanywhere web backend, you can just access say https://webejammn.pythonanywhere.com/api/endpoint/to/do/this/thing/, or whatever webapp domain/url that you have setup.

Hi, thank you for the reply! Yes, that is what I'm trying to do. But when I access my pythonanywhere URL using this.http.get(url) I keep getting the below error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.0.11:8105' is therefore not allowed access. The response had HTTP status code 401.

I can access other sites, just not my pythonanywhere site. I installed django-cors-headers and I added it to my install apps: INSTALLED_APPS = ( ... 'corsheaders', ... )

And to the top of my middleware classes:

MIDDLEWARE_CLASSES = ( 'corsheaders.middleware.CorsMiddleware',

And I put my remote access url into CORS_ORIGIN_WHITELIST and when that didn't work also tried CORS_ORIGIN_ALLOW_ALL but no matter what I do I still get the error.

Perhaps I'm doing something wrong with the corsheaders set up but as far as I can tell I'm setting it up as per their documentation and as per tutorial videos. I didn't know if there was something else that could be blocking my access to my pythonanywhere site?

Hmm, the CORS_ORIGIN_ALLOW_ALL setting you mention definitely looks like the right way to do fix this. Just a sanity check: did you reload your website after adding

CORS_ORIGIN_ALLOW_ALL = True

...to your settings.py?

Hi, yes, I reloaded it. I'm not sure if maybe somehow I didn't install it properly? I tried installing it in both my virtualenv and a regular bash console.

If it wasn't installed correctly, I'd expect you to get errors because when it tried to process the your MIDDLEWARE_CLASSES settings, so that should be OK.

Actually, now I think of it -- which version of Django are you using? I see you mention MIDDLEWARE_CLASSES above, and that should be MIDDLEWARE if you're using >= 1.10.

I'm using 1.11. I tried changing it to MIDDLEWARE but then my site stops loading and I get the below in the error log:

2018-08-03 14:53:38,603: Error running WSGI application 2018-08-03 14:53:38,622: TypeError: object() takes no parameters 2018-08-03 14:53:38,623: File "/var/www/webejammn_pythonanywhere_com_wsgi.py", line 26, in <module> 2018-08-03 14:53:38,623: application = get_wsgi_application() 2018-08-03 14:53:38,623: 2018-08-03 14:53:38,623: File "/home/webejammn/.virtualenvs/myvirtualenv/lib/python3.4/site-packages/django/core/wsgi.py", line 14, in get_wsgi_application 2018-08-03 14:53:38,623: return WSGIHandler() 2018-08-03 14:53:38,623: 2018-08-03 14:53:38,623: File "/home/webejammn/.virtualenvs/myvirtualenv/lib/python3.4/site-packages/django/core/handlers/wsgi.py", line 151, in init 2018-08-03 14:53:38,624: self.load_middleware() 2018-08-03 14:53:38,624: 2018-08-03 14:53:38,624: File "/home/webejammn/.virtualenvs/myvirtualenv/lib/python3.4/site-packages/django/core/handlers/base.py", line 82, in load_middleware 2018-08-03 14:53:38,624: mw_instance = middleware(handler) 2018-08-03 14:53:38,624: ******* 2018-08-03 14:53:38,624: If you're seeing an import error and don't know why, 2018-08-03 14:53:38,624: we have a dedicated help page to help you debug: 2018-08-03 14:53:38,625: https://help.pythonanywhere.com/pages/DebuggingImportError/ 2018-08-03 14:53:38,625: *******

Hi, I removed some custom middleware I had, and that got rid of the wsgi error and my site loads now. However, my mobile app still gives the "no 'Access-Control-Allow-Origin' header is present on the requested resource" error.

You may instead send cors headers manually. The exact django method you use depends on how are you rendering the response

I think that in order to look into this more we'll need to take a look at the site from our side. I see you have password protection switched on; could you get in touch with us using the "Send feedback" link above and let us know some credentials we can use to see the site?

I'm having this exact problem.

I did everything that needs to be done on the django config side, but the error persists on the frontend side (in my case, the problem is in iOS).

I read in Stackoverflow that this may be a nginx configuration thing: https://stackoverflow.com/questions/50913902/django-rest-framework-disable-cors

location /myendpoint/ {
    allow my.servers.ip.address;
    deny all;
}

So I'm thinking this may be something at the PA level that we developers can't change.

What is the exact error that you see, from doing what js request?

Actually, I was able to fix it just by setting

CORS_ORIGIN_ALLOW_ALL = True

and commenting the CORS_ORIGIN_WHITELIST variable.