Angular2应用调用node.js函数答案

【问题标题】：Angular2 application call node.js functionAngular2应用调用node.js函数
【发布时间】：2017-07-08 11:13:37
【问题描述】：

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

我来自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" })
})

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

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost:4200' 因此不允许访问。

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

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

【问题讨论】：

如果您正在运行 angular-cli，他们在此处描述了一个代理设置 - npmjs.com/package/angular-cli#proxy-to-backend
如果设置代理对您没有帮助，您可以使用此 chrome 插件暂时禁用此浏览器功能。 chrome.google.com/webstore/detail/allow-control-allow-origi/…
好的，所以我添加了代理，在 package.json 文件中配置了启动设置，但问题仍然存在，如果我禁用了浏览器功能，那么当我最终使用它投入生产时，我重新-启用这些功能然后问题就会回来不是吗？
如果您的端点是不同的主机，您只会遇到问题，所以是的，如果您需要 CORS，那么您应该在开发中解决它，但是如果您只是打算构建和放置您的 Angular 应用程序（ dist) 在同一个域下，您可以代理 dev 并且在 prod 中它只是相对的。

标签： javascript node.js angular cors preflight

【解决方案1】：

您还必须添加代码来处理浏览器为 CORS preflights 发送的 OPTIONS 请求：

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

该添加只会导致您的 Node 应用发送一个 200 响应，其中没有包含所有必要的 Access-Control-* 响应标头的正文。

【讨论】：

感谢您的信息，我刚刚将您提供的脚本添加到节点应用程序中，所以我有 app.options('/delete' 和 app.post('/delete' )，但仍然存在问题仍然存在..
好吧，越来越近了，我没有收到错误“TypeError：req.setHeader 不是调用后返回的函数
您需要确保在您的应用程序执行任何其他 Express 路由之前将该代码和问题中的 sn-p 放在您的应用程序代码中 - 基本上尽可能靠近顶部。
是的，你打错字了——req.setHeader 应该改为 res.。
是的，它就在顶部，看看我的其他评论，我想我们正在接近解决它，当我调用它时，我现在得到 TypeError: req.setHeader is not a function