I have two separate applications:
- AngularJS client working on http://localhost:8080
- NodeJS API server working on http://localhost:3000
NodeJS API Server just gives json data to client (and does not give any html pages). So, to provide the client with the ability to communicate with the server, I enable CORS technology on my API server.
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
next();
});
Also I want to use clean URLs without the # symbol, so I enable html5mode in my AngularJS app
function config($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/login');
...
---index.html
<!doctype html>
<html lang="en" ng-app="app">
<head>
<base href="/">
<title>APP</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/fontello.css">
</head>
<body>
<div ui-view="content"></div>
<script src="dist/app.js" type="text/javascript"></script>
</body>
</html>
The problem: when i interact with my app by btn's with ui-sref all working good, but when i reload page, i get the following output: Cannot GET /about
You can suggest me use rewrite all my links to index.html For example:
app.all('/*', function(req, res, next) {
res.sendFile('index.html', { root: __dirname });
});
But i haven't any "views" on my server.
What can you offer me in this situation?
