title: XMLHttpRequest cannot load url. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access
body: <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>