express .stati c () не обслуживает файлы из папок publi c в путях маршрутизатора, которые не являются "/" - PullRequest
Новая
       8

express .stati c () не обслуживает файлы из папок publi c в путях маршрутизатора, которые не являются "/"

0 голосов
/ 17 марта 2020

Express .stati c config: 

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

Структура файла: 

--public
  --assets
  --js
    --[js scripts]
  --stylesheets
    --[css files]

Маршруты: 

const shopRoutes = require('./routes/shopRoutes')
app.use('/', shopRoutes)

const itemApiRoutes = require('./routes/itemApiRoutes')
app.use('/api/shopitems', itemApiRoutes)

const logSignRoutes = require('./routes/logSignRoutes')
app.use('/account', logSignRoutes)

Проблема в том, что все Для файлов js по пути root в "localhost: 3000 /" (shopRoutes) требуется следующий файл css, примерно такой же, и отлично работает: 

<link rel="stylesheet" type="text/css" href="stylesheets/header.css">

Использование Express Маршрутизатор файл e js по пути "localhost: 3000 / account / login" вызывает тот же файл css с точно таким же синтаксисом, но получает ошибку: 

Cannot GET /account/login/stylesheets/header.css/

Я не понимаю как express .stati c обслуживает stati c файлов или я что-то делаю неправильно?

1 Ответ

1 голос
/ 17 марта 2020

Если вы укажете относительный URL-адрес, например: 

href="stylesheets/header.css"

, браузер добавит путь к веб-странице, на которой вы находитесь, и запросит этот объединенный путь с вашего сервера. Если ваша веб-страница не находится на верхнем уровне вашего веб-сайта и, следовательно, не имеет пути, она не будет работать должным образом. Я хочу подчеркнуть, что это делает браузер, а не Express. Таким образом, если вы находитесь на веб-странице с этим URL: 

http://localhost:3000/account/login

И браузер увидит: 

<link rel="stylesheet" type="text/css" href="stylesheets/header.css">

В итоге будет объединен путь веб-страницы 

/account/login

с относительным URL-адресом, указанным в теге <link>, и, как вы узнали, он запросит: 

/account/login/stylesheets/header.css

Когда express.static() увидит этот URL-адрес, это ничего не соответствует вашей иерархии каталогов 

__dirname + "/public"

, поэтому она не будет найдена.

Вместо этого вы хотите указать ведущий sla sh: 

<link rel="stylesheet" type="text/css" href="/stylesheets/header.css">

Это говорит браузеру не добавлять какой-либо путь к URL, и он отправляет запрос на ваш сервер для: 

/stylesheets/header.css

Когда express.static() получает этот запрос, он объединяет его с 

__dirname + "/public"

и в итоге будет искать файл 

__dirname + "/public" + "/stylesheets/header.css"`

, который будет найден в вашей иерархии каталогов publi c и будет работать.

...