django rest framework api and angular 2 integration

Question

I'm developing back-end API with Django Rest Framework and front-end with Angular 2. The django server runs on localhost:8000 and the angular server runs on localhost:3000. When I try to access API using angular 2, it gives me the following error:

customerregister:1 XMLHttpRequest cannot load http://127.0.0.1:8000/user/signup. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

What I want to ask is how to integrate the development of Django Rest API and angular 2 project.

Marin · Accepted Answer · 2017-03-26 08:02:43Z

2

First install : https://github.com/ottoyiu/django-cors-headers.

Apply your apps:

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

Then change your settings for middleware:

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

Restart server and it must work.

answered Mar 26, 2017 at 8:02

Marin

1,12114 silver badges34 bronze badges

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

2 Comments

manjeet kumar Over a year ago

The solution that you gave will solve the problem for localhost but will I have to do the same when I'll deploy my decoupled app on actual server. I have never deployed any code on actual server but have read the following guide. digitalocean.com/community/tutorials/…. In step 4, the guide tells how to config your server. It points the incoming request to the port where my django code will be running. Then how the user will have access to website.

Marin Over a year ago

This configuration will work on your server same thing.

Collectives™ on Stack Overflow

django rest framework api and angular 2 integration

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related