谷歌浏览器中用于 API 调用的跨源错误答案

【问题标题】：Cross orgin error in google chrome for the api call谷歌浏览器中用于 API 调用的跨源错误
【发布时间】：2017-01-30 13:03:57
【问题描述】：

在 nodejs 后端我已将此代码添加到 server.js

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

但在 google chrome 的 angularjs 2 客户端中抛出此错误

XMLHttpRequest cannot load http://localhost:8080/team. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405.

这是我正在使用的 angular2 的服务代码

export class DataService {
    // URL to web api

    constructor(private http: Http, private _configuration: Configuration,private team:Team) {

        //this.actionUrl = _configuration.ServerWithApiUrl;
        this.actionUrl = "http://localhost:8080/team";

    }
    private actionUrl: string;

    addData(postData: Team): Observable<Team[]> {

        //let body = JSON.stringify({ Team });
        this.team = postData;
        console.log(this.team);
        let body = JSON.stringify({ postData });
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        console.log(body);

        return this.http.post(this.actionUrl, body, options)
            .map(this.extractData)
            .catch(this.handleError);

    }

【问题讨论】：

标签： angularjs node.js api angular

【解决方案1】：

更新：

对于您的新错误消息：Angular2 是小写标题。请更新您的后端以接受content-type。

res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, content-type, Accept");

你不能测试到这个 URL 的帖子：http://posttestserver.com/post.php?dir=anyNameYouWillFind

并且可以在那里看到你的帖子：http://posttestserver.com/data/

浏览到年、月、日和 anyNameYouWillFind ..

旧：

你必须给你的网址加上前缀！！

this.http.get('http://localhost:8080/v1_user/45646/team');

【讨论】：

你的意思是我必须在客户端添加“localhost:8080/v1_user/45646/team”这个网址对吗？？
请发布您的 Angular2 获取方法。
但是在您的错误消息中是另一个 URL.. localhost:8080/v1_user/45646/team 而不是 localhost:8080/team 在您的问题中..
是的，我已根据您的回答更新了错误已更改
angular 是小写标题，请更新您的后端以允许content-type。

【解决方案2】：

通过将它添加到后端 node.js 来修复它

// access control --> allowed all origin
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    next();
})

.options('*', function(req, res, next){
    res.end();
})
;

【讨论】：