Angular2 应用程序调用 node.js 函数

Question

好的，所以我在 http://localhost:4200/ 上有一个 Angular2 应用程序运行，在这个应用程序中，我正在尝试调用当前位于单独 node.js 应用程序中的函数运行在 http://localhost:3000/

我来自 Angular2 应用程序的呼叫：

deletePhoto(photoId: string) {

    var options = new RequestOptions({
        headers: new Headers({
            'Accept': 'application/json',
            'Access-Control-Allow-Origin': 'http://localhost:4200'
        })
    });

    let url = `http://localhost:3000/delete?photoId=${photoId}`;

    this.http.post(url, options).subscribe(response => {
        let user = response.json()
        console.log(user);
    },
        err => {
            console.log('Unable to call delete photo', err);
        });

}

这是我的 node.js 功能：

var express = require('express')

var app = express();

app.post('/delete', function (req, res) {

    req.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
    res.setHeader('Access-Control-Request-Method', '*');
    res.setHeader('Access-Control-Allow-Methods', 'POST');
    res.setHeader('Access-Control-Allow-Headers', '*');

    var photoId = req.query['photoId'];
    //var userId = req.query['userId'];
    res.json({ "photoId": photoId, "test": "Testing node server" })
})

但是我在浏览器中收到的错误是：

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:4200' is therefore not allowed access.

现在在谷歌搜索这个错误后，我读到我需要在请求的资源上设置 header 所以我在我的 node 方法上添加了 req.setHeader 但仍然无济于事，我也在我的 Angular2 应用程序中设置了它，看看它是否是它的意思，但遗憾的是结果相同。

我已经阅读了 cors 但不幸的是我仍然对此感到困惑。

Answer 1

您还必须添加代码来处理浏览器为 CORS preflights:

发送的 OPTIONS 请求

app.options('/delete', function(req, res) {
    res.send(200);
});

该添加只会导致您的 Node 应用程序发送一个 200 响应，其中没有 body 以及所有必要的 Access-Control-* 响应 headers。

Angular2 应用程序调用 node.js 函数

Angular2 application call node.js function

javascript

node.js

cors

preflight

angular