Node.js 和 Angular 路由 - 如何使浏览器 URL 无法访问 REST API答案

【问题标题】：Node.js and Angular routing - How to make REST API inaccessible by browser URLNode.js 和 Angular 路由 - 如何使浏览器 URL 无法访问 REST API
【发布时间】：2015-05-06 03:41:20
【问题描述】：

我使用 Angulars $http 服务在后端调用数据。比方说 JSON 数据。这样做的示例 URL 类似于：

/get/data

在 Angular 中执行此操作可以很好地返回请求的数据。没问题。

但即使我使用带有$urlRouterProvider.otherwise('/'); 的 Angular UI 路由器捕获 所有其他 Angular 路由，我仍然可以转到我的浏览器并输入 mydomain.com/get/data URL，它为我提供了一个页面JSON 代码。

如何限制后端服务器调用仅来自 Angular，而不是来自未经用户身份验证的浏览器 URL？

注意在 Node 上使用 Express 4.X，我还为我的应用程序提供了一条“包罗万象”的路由，以默认返回到我的前端 index.html 页面，如下所示：

router.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, '/index.html'));
});

谢谢！

【问题讨论】：

你应该看看 PassportJS。这会让你开始。
我对护照很熟悉，但由于没有身份验证级别，我想知道是否可以修复它，而不是为应用程序添加一个全新的安全层。
身份验证正是您所需要的——恐怕不能逃避它
感谢您的付出，那我试试认证！
在没有身份验证的情况下，您最接近的方法是让您的 Angular 应用程序发送一个自定义标头，并在后端要求该标头。但是，任何试图获取原始数据的人当然都可以对其进行欺骗。此外，原始数据可在网络选项卡中轻松获得。

标签： angularjs node.js rest angular-ui-router

【解决方案1】：

这不是真正的角度问题。当用户输入 mydomain.com/get/data 时，他们实际上从未加载 Angular 应用程序，因此您的解决方案必须在其他地方完成。

例如，您可以将其添加到您网站的 .htaccess 文件中。它会将所有流量重定向到您的域的根目录。

在此处查看此答案： .htaccess Redirect based on HTTP_REFERER

【讨论】：

这是否仍允许异步 Angular 请求从应用程序中获取我的数据？
好点。我不认为它会。我已经编辑了我的答案。查看上面的链接。那里给出的示例更接近您的需要。我相信只要引用者在同一个域中，它就会允许通过请求。

【解决方案2】：

同意@HankScorpio

Angular 应用程序路径的 Angular UI 路由和服务器应用程序访问 URL 路径是两个不同的东西。

Angular UI 路由器允许您在单页应用程序中导航，就好像您有一个多页应用程序一样。这与访问实际的服务器应用程序端点完全不同。

所有限制都应在 Web 服务器和服务器 Web 应用程序端完成。因此，您将不得不实施一些身份验证/授权策略。

【讨论】：

【解决方案3】：

天哪！花了整整一天的时间来解决这个问题，终于解决了！狗被埋在标头中-您必须在Angular http请求中指定一个，然后在节点中读取它。

首先 - 路由设置与本指南中的相同：https://scotch.io/tutorials/setting-up-a-mean-stack-single-page-application

在 Angular http 请求的前端，我将接受的标头类型之一指定为 json：

$http.get('/blog/article', { 
    headers: {
        'Accept': 'application/json;'
    }
}).success(function(data) {
    console.log(data);
})
.error(function(data) {
    console.log('Error: ' + data);
});

在节点的后端，我检查标头是否包含 json 类型。如果是这样，我会返回 json 数据，因此 angular 可以接收内容。如果没有，我会强制节点加载 index.html，控制器从中运行前面提到的带有标头的 http 请求，确保您获得数据。

app.get('/blog/article', function(req, res) {

if(/application\/json;/.test(req.get('accept'))) {
    //respond json
    //console.log("serving json data...");
    blogItemModel.find({ "_id" : req.query.id }, 'title full_text publish_date', function(err, blog_item){
        // if there is an error retrieving, send the error. nothing after res.send(err) will execute
        if (err) res.send(err);
        res.json(blog_item);
    });    
} else {
    //respond in html
    //console.log('Request made from browser adress bar, not through Angular, serving index page...');
    res.sendfile('./public/views/index.html');    
}

});

【讨论】：

【解决方案4】：

你不能。

您的 Angular 代码正在他们的机器上、在他们的浏览器中运行。

因此，人们可以欺骗环境、在浏览器请求时捕获数据、在浏览器中编辑应用的 JS 或各种其他方法。

你为什么想要这样的限制？

【讨论】：