Retrieve data from API REST Django and Angular

Question

I'm trying to retrieve the json from the rest api set up using Django.

This data is currently only hosted on: http://127.0.0.1:8000/xyz

When I try to retrieve it using

 $http({
            method: 'GET',
            url: 'http://127.0.0.1:8000/xyz',
 })

I get an error that is:

XMLHttpRequest cannot load http://127.0.0.1:8000/xyz. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access.

Can someone tell me a way of dealing with this, please?

Thanks!

Here's my Django settings folder:

INSTALLED_APPS = (
    'student',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders'
)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    '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',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware'
)

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_URLS_REGEX = r'^/api.*$'
CORS_ORIGIN_WHITELIST = (
    'mydomain',
    'localhost:3000',
    'http://127.0.0.1:8000/'
)

dkarchmer · Accepted Answer · 2015-10-27 16:41:41Z

2

Look into using django-cors-headers to have Django return the proper headers. You can then create a whitelist for your site (http://127.0.0.1:8080 for development and whatever your final domain for production)

I use the following on my settings for a similar setup:

INSTALLED_APPS += ('corsheaders',)
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_URLS_REGEX = r'^/api.*$'
CORS_ORIGIN_WHITELIST = (
    'mydomain',
    'localhost:3000',
)

You may also need to add the following to your Angular project:

$http.defaults.useXDomain = true;

[UPDATE]

See this blog for more details

edited Oct 27, 2015 at 16:41

answered Oct 27, 2015 at 2:00

dkarchmer

5,6344 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

tryingtolearn Over a year ago

Hi, I believe I've added everything accordingly yet I'm still getting the same error. I've added corsheaders and added 127.0.0.1:8080 to my whitelist but it doesn't seem to be working. I've added $http.defaults.useXDomain = true; to my angular factory. Do I need to alter it in some way?

dkarchmer Over a year ago

In that case, you will have to describe more about your setup. For example, are you running the angular app within the same domain (maybe rendered by django)? or as a complete stand-alone, running on different domains? Check this post for more potential solutions to try: qwertylaundry.com/posts/angular-cors-csrf

tryingtolearn Over a year ago

I think I've understood it, thanks! I get the rest, but I'm not sure where to put "my_endpoint = ensure_csrf_cookie(MyViewset.as_view(...))" which he describes at the end of part 2. Could you help me there?

dkarchmer Over a year ago

I forgot to ask you. Are you using DRF (django-rest-framework) or similar library for your API? If not, you should. It will take care of things like this. It will also allow you to use tokens in which case, you don't need CSRF protection. But to answer your question, ensure_csrf_cookie is a decorator so it can simply be used as any other decorator on the urls or views file for the URL that you are implementing. But again, just grab a copy of DRF and avoid these details

tryingtolearn Over a year ago

I am indeed using django-rest-framework. Can you point me to an instruction list to get through it?

|

SuperNova · Accepted Answer · 2015-11-05 08:16:30Z

0

Apart from the changes in settings.py, please try to add a slash at the end of the url you are calling

    $http({
                method: 'GET',
-                url: 'http://127.0.0.1:8000/xyz',
+                url: 'http://127.0.0.1:8000/xyz/',
     })

answered Nov 5, 2015 at 8:16

SuperNova

27.7k7 gold badges98 silver badges70 bronze badges

Collectives™ on Stack Overflow

Retrieve data from API REST Django and Angular

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related