Проблема пути в URL (абсолютная и относительная) - PullRequest
Новая
       10

Проблема пути в URL (абсолютная и относительная)

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

У меня есть локальный веб-сайт с Nodejs (используется фреймворк Express). Я использую маршрут express для отображения каждого файла в моем каталоге, и если запрашиваемый файл не находится в моем каталоге, я хочу отобразить not-found.html. Но я понял, что происходят странные вещи. Вот в чем проблема:

, когда пользователь вводит что-то вроде этого: "http://localhost: 3000 / swgw " последнее выполнение промежуточного программного обеспечения и свойство "not-found. html". (со стилем css)
, когда пользователь вводит URL, как показано в следующем шаблоне: "http://localhost: 3000 / products / *", на этот раз проблема заключается в not-found.html рендеринге без стиля css. ( Примечание: * не 1-6)

  • public
    • products
      • product-1. html
      • product-2. html
      • product -3. html
      • product-4. html
      • product-5. html
      • product-6. html
    • стиль
      • не найден. css
    • не найден. html

  • сервер. js сервер. js 

    ```
...
app.use(express.static(path.join(__dirname, 'public')));

app.get("/products/:id", (req, res, next) => {
  // since I have six product with id from 1 to 6. 
  if (req.params.id <= 6 && req.params.id >= 1) {
    res.setHeader('content-type', 'text/html');
    return res.sendFile(path.resolve(`public/products/product-${req.params.id}.html`));
  }  
  else {
    next();
  }
});

app.get('*', function(req, res){
  res.status(404);
  res.sendFile(path.resolve('public/not-found.html'));
});
```

    не найдено. html ... <link rel="stylesheet" href="./style/not-found.css" > ...

1 Ответ

1 голос
/ 23 апреля 2020

Изменить на 

<link rel="stylesheet" href="/style/not-found.css" >.

Требуется путь относительно каталога publi c, который express.static() имеет в качестве root.

Но может u объясните мне, если href = "./ style / not-found. css", почему он работает правильно, когда пользователь вводит: "localhost: 3000/5", но не работает на "localhost: 3000 / products / 5" ( Я имею в виду загрузку css успешно)

Если ссылка на вашей странице HTML не начинается с http:// или с /, то она считается относительной к пути ссылкой и браузером возьмет путь к странице и объединит его с URL-адресом в ссылке, чтобы создать полный URL-адрес перед отправкой на сервер. Итак, когда у вас есть это: 

href="./style/not-found.css"

и URL страницы такой: 

http://localhost:3000/products/something

Браузер в итоге запросит: 

http://localhost:3000/products/style/not-found.css

И, ваш сервер не будет знать, что с этим делать. С другой стороны, когда вы меняете тег <style> на этот: 

 href="/style/not-found.css"

Затем ваш URL начинается с /, поэтому браузер добавляет к нему только домен и браузер запросит: 

http://localhost:3000/style/not-found.css

, который будет работать.

Итак, когда вы используете путь вроде:

http://localhost: 3000/5

Тогда путь для этого просто /, поэтому, когда вы объедините / с ./style/not-found.css, браузер в итоге запросит 

http://localhost:3000/stye/not-found.css

, и он будет работать, потому что путь был root путь. Таким образом, это не работает для страниц, которые не находятся на верхнем уровне. Вот почему URL-адреса ваших ресурсов c всегда должны иметь абсолютный путь (начиная с /), чтобы они не зависели от пути к странице хостинга.

...