Node, Express, Angular routing error
I am looking into MEAN stack but haven't started with db yet. I tried to link the rest of the stack but it throws an error
Error: Restricted URI Access Denied createHttpBackend
I googled and couldn't find a solution to this problem.
This is my main controller in Angular app.js:
app.controller('MainCtrl', function($scope, $http) {
console.log("success");
$http.get('/').
success(function(data, status, headers, config) {
console.log("success");
$scope.name = data.name;
}).
error(function(data, status, headers, config) {
$scope.name = 'Error!';
})
});
My node server app.js:
var express = require('express'),
http = require('http');
var app = express();
app.set('port', 3000);
app.get('/', function(req, res) {
var name = 'MyNameFromServer';
res.send(name);
})
http.createServer(app).listen(app.get('port'), function () {
console.log('Express server listening on port ' + app.get('port'));
});
And this is the error in the browser console (when Angular http.get):
"Error: Access to restricted URI denied
createHttpBackend/<@file:///F:/routing/js/angular.js:9902:6
sendReq@file:///F:/routing/js/angular.js:9703:0
$http/serverRequest@file:///F:/routing/js/angular.js:9415:15
Please help me.
This is the complete app - https://github.com/V1cHu/routing
source to share
After looking at the code, I found that there are several issues in your code 1) You should n't add this crossbrowser support code
app.all('/*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "GET, POST","PUT");
next()}
);
and also this code
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
2) On the server side, the app.js file will change the call to app.get ('/') to a different route like app.get ('/ xyz') as it prevents you from loading your angular js code
3) In your main controller (MainCtrl) use $ http.get ('/ xyz') as above. Don't use $ http.get (' http: // localhost: 3000 / ')
$http.get('/xyz').
success(function(data, status, headers, config) {
console.log("success");
$scope.name = data;
}).
error(function(data, status, headers, config) {
$scope.name = 'Error!';
})
EDIT: server side app.js add this code
var path = require('path')
app.use(express.static(path.normalize(__dirname + '/')));
and on the client side the app.js file changes $ scope.name to data not data.name
$scope.name = data;
He will solve the problems in your problem
source to share