XMLHttpRequest cannot load url. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access

Question

1. I have Angular2 as frontend and Django as backend. I am getting error for making a call to Django using services.
   2. Below is My Service method. Django is running on my local PC.

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<Publisher[]>{
               
        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);               
    }
}

1. I am getting error XMLHttpRequest cannot load http://127.0.0.1:8000/api/v1/publisher. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
   2. Server Error

Answer 1

if u are trying to access your backend from angular2 which runs on another port then u will have to allow cross origin calls (CORS)

JUST allow cors for localhost:3000 and this will be running perfectly fine :)