Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote …CORS header ‘Access-Control-Allow-Origin’ missing
本问题已经有最佳答案,请猛点这里访问。
我有http:// localhost:3000 / edata中的数据
1 | [{"_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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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')。
如何修复错误。以及如何从其他主机获取数据... plz帮助我。
如果使用Node-server,请在server.js中添加
1 2 3 4 5 6 7 | 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
1 2 3 4 | 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()) |