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

Question

好吧，我有一个 Angular2 应用程序在 http://localhost:4200/ 上运行，在这个应用程序中，我试图调用位于单独的函数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 响应，但没有正文以及所有必要的 Access-Control-* 响应 header 。