基本标记在 Angular HTML5 模式下断开脚本链接

Question

问题

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

详情

我最近设置了一个 Angular 1 应用程序以在 HTML5 模式下运行，如下所示：

    $locationProvider.html5Mode(true);

我在 index.html 的头部包含了一个基本标记，如下所示：

<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>