javascript - Angular 'Cannot GET' route on page refresh - Stack Overflow

admin管理员组

文章数量:1326118

I have a search function within my Angular app that when executed hits my API to grab results then redirects the user using $location.url. Everything works great...until I try to reload the results page. When I do so I get a Cannot GET /search/[search-term] message.

app.config.js:

'use strict';

angular.module('gameApp')
  .config(function($routeProvider, $locationProvider) {
    $routeProvider

    .when('/player/:playerId', {
      templateUrl: 'player.html'
    })
    .when('/search/:searchTerm', {
      templateUrl: '/app/gmSearchResults/gmSearchResults.html'
    });

    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false,
      rewriteLinks: false
    });
  });

relevant navbar.controller.js:

vm.getSearchResults = function(searchTerm) {
  searchService.resource.getResults({
    query: searchTerm
  }).$promise.then(function(results) {
    if (results.playerId) {
      $location.url('/customer/' + results.playerId);
    } else {
      saveLatest(results);
      $location.url('/search/' + searchTerm);
    }
  });
};

I have a search function within my Angular app that when executed hits my API to grab results then redirects the user using $location.url. Everything works great...until I try to reload the results page. When I do so I get a Cannot GET /search/[search-term] message.

app.config.js:

'use strict';

angular.module('gameApp')
  .config(function($routeProvider, $locationProvider) {
    $routeProvider

    .when('/player/:playerId', {
      templateUrl: 'player.html'
    })
    .when('/search/:searchTerm', {
      templateUrl: '/app/gmSearchResults/gmSearchResults.html'
    });

    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false,
      rewriteLinks: false
    });
  });

relevant navbar.controller.js:

vm.getSearchResults = function(searchTerm) {
  searchService.resource.getResults({
    query: searchTerm
  }).$promise.then(function(results) {
    if (results.playerId) {
      $location.url('/customer/' + results.playerId);
    } else {
      saveLatest(results);
      $location.url('/search/' + searchTerm);
    }
  });
};

• javascript
• angularjs
• node.js

Share Improve this question Follow asked Jul 20, 2015 at 16:17 MattDionisMattDionis 3,6161010 gold badges5555 silver badges110110 bronze badges 1

• Are you sure that server response index.html when you try to load specific page? Try to turn off html5 mode and check it. – user1050438 Commented Jul 20, 2015 at 16:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Setup your express app:

app.route('/*').get(function(req, res) { 
    return res.sendFile(path.join(config.root, 'index.html')); 
});

Just a small edit to Georgii Kats answer. Try using:

    app.get('/*', function (req, res, next) {
       if (/.js|.html|.css|templates|js|scripts/.test(req.path) || req.xhr) {
       return next({ status: 404, message: 'Not Found' });
       } else {
          return res.render('index');
       }
    });

本文标签： javascriptAngular 39Cannot GET39 route on page refreshStack Overflow