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

Question

我使用Angulars $http服务在后台调用数据。假设 JSON 数据。这样做的一个例子 URL 是这样的：

/get/data

从 Angular 内部执行此操作很好地 returns 请求的数据。没问题。

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

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

N.B. 在 Node 上使用 Express 4.X，我还为我的应用程序提供了一个 'catch-all' 路由以默认返回我的前端 index.html 页面，如下所示：

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

谢谢！

Answer 1

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

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

在这里查看这个答案：

Answer 2

同意@HankScorpio

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

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

所有限制都应该在网络服务器和服务器网络应用程序端进行。因此，您将不得不实施一些 authentication/authorisation 策略。

Answer 3

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

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

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

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

在 Node 的后端，我检查 header 是否包含 json 类型。如果是，我返回 json 数据，因此 angular 可以接收内容。如果没有，我强制节点加载 index.html，控制器从中运行前面提到的带有 header 的 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');    
}

});

Answer 4

你不能。

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

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

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

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

Node.js and Angular routing - How to make REST API inaccessible by browser URL

rest

node.js

angularjs

angular-ui-router