angularjs - Base 标签在 Angular HTML5 模式下破坏脚本链接

Question

问题

设置基本标记以在 HTML5 模式下运行 Angular 1.x 后，浏览器 (Chrome) 在通过直接导航到 localhost:3000/resource/id< 访问应用程序时向错误的脚本路径发出请求.

详情

我有一个 Angular 1 应用程序，我最近将其设置为以 HTML5 模式运行，如下所示:

    $locationProvider.html5Mode(true);

我在 index.html 的头部包含了一个 base 标签，如下所示:

<base href="/">

我已经设置了我的快速路由，以便(例如)http://localhost:3000/album/38ad87f 的请求将返回 index.html，如下所示:

    .use('/', express.static(__dirname + '/crate-frontend/app'))

// Playlist endpoints
.use('/api/playlists', playlistRoutes)

// Album endpoints
.use('/api/album', albumRoutes)

// Artist endpoints
.use('/api/artist', artistRoutes)

// Track endpoints
.use('/api/tracks', trackRoutes)

// User endpoints
.use('/api/user', userRoutes)

// Discogs proxy endpoints
.use('/api/discogs', discogsRoutes)

// Youtube proxy endpoints
.use('/api/youtube', youtubeRoutes)

// Search endpoints
.use('/api/search', searchRoutes)

// For serving up crate-frontend/app/index.html
.all('/*', function(request, response){
    response.sendFile(__dirname + '/crate-frontend/app/index.html' );
})

现在，当我转到主页并浏览时，一切正常。但是，如果我刷新不是根的页面或将 http://localhost:3000/album/38ad87f 之类的 URL 复制/粘贴到新窗口中，它就会中断。我可以看到它接收到 index.html，但是当浏览器请求每个链接的脚本时，例如:

<script src="app.js"></script>

它实际上向 http://localhost:3000/album/app.js 发出请求，返回 index.html。

有人可以告诉我我错过了什么/做错了什么吗？

Answer 1

尝试将您的资源包含在绝对路径中，这样您就永远没问题。

<script src="/app.js"></script>