跨來源請求阻止：同源策略不允許讀取遠程............... CORS頭「訪問控制允許來源」失蹤

Question

我有數據http://localhost:3000/edata

[{"_id":"598705ac8f79380367e0a7f2","name":"prasad","age":"28","gender":"male","phone":8790440944},{"_id":"598733508f79380367e0a7f8","name":"ravi","age":"27","gender":"male","phone":"9912881777"} 

我想這個數據是當我運行得到我的客戶端應用程序即http://localhost:4200

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import {HttpModule} from "@angular/http"; 
import { AppComponent } from './app.component'; 
import {TasksComponent} from "../tasks/tasks.component"; 
import {TaskServices} from "./services/task.services"; 

@NgModule({ 
declarations: [AppComponent, TasksComponent], 
imports: [BrowserModule,HttpModule], 
providers: [TaskServices], 
bootstrap: [AppComponent,TasksComponent] 
}) 
export class AppModule { } 

tasks.component.ts

import {Component, enableProdMode} from '@angular/core'; 
import {TaskServices} from "../app/services/task.services"; 
enableProdMode(); 
@Component({ 
selector: 'tasks', 
templateUrl: './tasks.component.html', 
styleUrls: ['./tasks.component.css'] 
}) 
export class TasksComponent { 
constructor(private taskServices:TaskServices){ 
this.taskServices.getTasks() 
     .subscribe(tasks =>{ 
     console.log(tasks); 
     }); 
    } 
    title = 'app'; 
} 

task.services.ts

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

@Injectable() 
export class TaskServices{ 
    constructor(private http:Http){ 
console.log('Task service initialized....'); 
    } 
    getTasks(){ 
    return this.http.get('http://localhost:3000/edata') 
    .map(res => res.json()); 
    } 

當我運行的應用程序

，在控制檯中我得到阻止錯誤跨來源請求：同源策略不允許在http://localhost:3000/edata讀取遠程資源。 （原因：缺少CORS頭'Access-Control-Allow-Origin'）。

如何修復error.and如何從其他主機獲取數據... plz幫助我。

Answer 1

如果使用節點服務器添加此在server.js

app.use(function (req, res, next) { 
res.setHeader('Access-Control-Allow-Origin', '*'); 
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); 
res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); 
res.setHeader('Access-Control-Allow-Credentials', true); 
next(); 
}); 

，並在你的HTTP方法添加Hearders

return this.http.get(
    'http://localhost:3000/edata',{ 
    headers: {'Content-Type', undefined} /** Use Content-type as your requirement undifined OR application/json**/ 
    }).map(res => res.json())