Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote …CORS header ‘Access-Control-Allow-Origin’ missing [duplicate]

问题:

This question already has an answer here:

• Why does my JavaScript get a “No 'Access-Control-Allow-Origin' header is present on the requested resource” error when Postman does not? 36 answers

i have data in http://localhost:3000/edata

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

i want this data to be get when i run my client application i.e 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());   } 

when i run application ,in the console i am getting the error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/edata. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

how to Fix the error.and how to get data from the other host...plz help me.

回答1:

If using Node-server add this in your 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(); }); 

and Add Hearders in your http method

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()) 

文章来源: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote …CORS header ‘Access-Control-Allow-Origin’ missing [duplicate]