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