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

Question

我使用 Angulars $http 服务来调用后端数据。假设 JSON 数据。执行此操作的示例 URL 类似于:

/get/data

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

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

如何在没有用户身份验证的情况下限制后端服务器调用仅来自 Angular，而不是来 self 的浏览器 URL？

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

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

谢谢!

Answer 1

天啊!花了一整天的时间来解决这个问题，终于解决了!狗被埋在 header 中 - 你必须在 Angular http 请求上指定一个 header ，然后在 Node 中读取它。

首先 - 路由设置与本指南中的相同: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 可以接收内容。如果没有，我会强制 Node 加载index.html， Controller 从中运行前面提到的带有 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');    
}

});