Friday 21 April 2017

CORS header 'Access-Control-Allow-Origin' missing angular 2 [duplicate]

This question already has an answer here:

I'm using angular 2 as front-end and Node js as back-end for my new application.

I am trying to call an api from localhost:8080 and angular 2 is running in localhost:3000

But i am getting error as

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/api/todos-list. (Reason: CORS header 'Access-Control-Allow-Origin' missing)"

My code is given below :

main.ts

import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./app.component"
import {HTTP_PROVIDERS} from "angular2/http";
import {TodoService} from './TodoService'
bootstrap(AppComponent,[HTTP_PROVIDERS,TodoService]);

app.component.ts

import {Component, View} from "angular2/core";
import {TodoService} from './TodoService'

@Component({
 selector: 'todo-app',
 templateUrl : 'app/components/templates/todo.html',
 directives: [],
 providers: [TodoService]
})

export class AppComponent {
todos = {};
constructor(private todoService: TodoService) {};

getTodos(){
   this.todoService.getTodos().subscribe(data => this.todos = data);
 }
}

TodoService.ts

import { Injectable } from 'angular2/core';
import {Http , Headers} from "angular2/http";
import 'rxjs/add/operator/map';

@Injectable()
export class TodoService {
 constructor(private http: Http) {}

  getTodos() {

  let headers = new Headers();
  headers.append('Access-Control-Allow-Headers', 'Content-Type');
  headers.append('Access-Control-Allow-Methods', 'GET');
  headers.append('Access-Control-Allow-Origin', '*');

  return this.http.get(`http://localhost:8080/api/todos-list`,headers:          headers).map((res:Response) => res.json());
  }
}

Please Help me.Thanks in advance.



via lara

No comments:

Post a Comment