javascript - Angular 参数和 Express 命中了错误的请求 URL

Question

每当我在任何 Angular 路线上添加参数或查询时，我的浏览器请求都会将该参数添加到我的 css 文件的 url 请求中。

我正在使用 html5mode true(漂亮的网址)

.state('profile', {
    url: "/profile/:steamId",
    templateUrl: "app/profile/profile.html",
    controller: "ProfileCtrl",
    controllerAs: "profile",
    data: {
        contentPages: 1
    }
});

$locationProvider.html5Mode(true);

我的 Angular 服务

    getProfile:function(steamId){
        var self = this;
        return $http.get('api/user/'+steamId).then(function(response){
            $log.debug('getProfile', response.data);
            return response.data;
        }, function(err){
            $log.error('Error user', err);
        });
    },

在我的服务器中

var express = require('express');
var app = express();

var bodyParser = require('body-parser');

// Launch ======================================================================

var server = app.listen(8000, function(){
    logger.info('The dagger flies at 8000');
});

// Configuration ======================================================================

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use(express.static(__dirname + '/public'));

// Routes ======================================================================

var users = require('./routes/users.route')(passport, logger);

// Middleware ======================================================================

app.use('/api/users', users);

app.get('/*', function(req, res, next) {
    res.sendFile('index.html', { root: 'public' });
});

我的index.html是为此设置的

<link rel="stylesheet" href="builds/style.css"/>

通常，当我在 localhost:8000/profile 上时，我会在网络选项卡中看到类似的内容

http://localhost:8000/builds/style.css

但是当我添加这样的参数时

localhost:8000/profile/13456 

在我的网络选项卡中，我看到了这个

http://localhost:8000/profile/builds/style.css

因此有一堆无样式的 html 代码。

我该如何解决这个问题？我尝试过使用快速静态中间件，但没有成功。

Answer 1

链接 CSS 或 JavaScript 是相对于当前目录的。要克服这个问题，请在路径前面添加 / 以将其引用为绝对路径:

<link rel="stylesheet" href="/builds/style.css"/>