XMLHttpRequest cannot load url. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access
<ol>
<li>I have Angular2 as frontend and Django as backend. I am getting error for making a call to Django using services.

<ol start="2">
<li>Below is My Service method. Django is running on my local PC.</li>
</ol></li>
</ol>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import "rxjs/Rx"; 
import 'rxjs/add/operator/map';

import { Publisher } from './publisher';

@Injectable() 
export class PublisherService{
    
        
    constructor(private http: Http){
        
    }
    
    private getPubUrl = 'http://127.0.0.1:8000/api/v1/publisher';
    
    
    getPublishers(): Observable&lt;Publisher[]&gt;{
               
        return this.http.get(this.getPubUrl)
                        .map(this.extractData)
                        .catch(this.handleError);
    }
    
    private extractData(res: Response){
        console.log(res);
        let body = res.json();
        return body.data || { };
    }
    
    
    private handleError(error: any){
        let errMsg = (error.message) ? error.message : 
                     error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg);
        return Observable.throw(errMsg);               
    }
}</code></pre>
</div>
</div>
</p>

<ol>
<li>I am getting error XMLHttpRequest cannot load <a href="http://127.0.0.1:8000/api/v1/publisher" rel="nofollow">http://127.0.0.1:8000/api/v1/publisher</a>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:3000" rel="nofollow">http://localhost:3000</a>' is therefore not allowed access.

<ol start="2">
<li>Server Error</li>
</ol></li>
</ol>