node.js 跨域请求被阻止：同源策略不允许读取远程……CORS 标头 'Access-Control-Allow-Origin' 丢失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45611400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote ...............CORS header ‘Access-Control-Allow-Origin’ missing
提问by durgaprasad kalapati
i have data in http://localhost:3000/edata
我在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
我希望在运行客户端应用程序时获取这些数据，即http://localhost:4200
app.module.ts
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
任务.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
任务.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).
当我运行应用程序时，在控制台中我收到错误跨域请求被阻止：同源策略不允许读取http://localhost:3000/edata 上的远程资源。（原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。
how to Fix the error.and how to get data from the other host...plz help me.
如何修复错误。以及如何从其他主机获取数据...请帮助我。
采纳答案by Nasiruddin Saiyed
If using Node-serveradd this in your server.js
如果使用Node-server在你的 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
并在您的 http 方法中添加听者
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())
