尝试加载样式表时出现 404 错误

Question

尝试加载样式表时出现 404 错误

我对 html/css/js 非常陌生，并通过构建个人网站自学。但是，当我尝试使用 http-server 运行网站时，加载页面时服务器会报告样式表 404 错误。当我直接打开 html 文件而不使用 http-server 时，可以按预期找到有问题的资源。我怀疑我的问题只是我不明白如何正确格式化路径名，但我不确定。

文件结构：

我的代码来自index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href = "css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>

Run Code Online (Sandbox Code Playgroud)

打开页面时出现的错误：

[2022-08-18T21:21:16.660Z]  "GET /css/style.css" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0"
[2022-08-18T21:21:16.662Z]  "GET /js/index.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0"
[2022-08-18T21:21:16.663Z]  "GET /css/bootstrap.css" Error (404): "Not found"
[2022-08-18T21:21:16.667Z]  "GET /css/style.css" Error (404): "Not found"
[2022-08-18T21:21:16.668Z]  "GET /assets/images/ag.jpg" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0"
[2022-08-18T21:21:16.669Z]  "GET /js/index.js" Error (404): "Not found"
[2022-08-18T21:21:16.670Z]  "GET /assets/images/ag.jpg" Error (404): "Not found"
[2022-08-18T21:21:16.689Z]  "GET /js/index.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0"
[2022-08-18T21:21:16.690Z]  "GET /js/index.js" Error (404): "Not found"

Run Code Online (Sandbox Code Playgroud)

我尝试过：
使用 ../css/、./css/、/css/、~/css 指定路径
将 css 文件移动到与 index.html 相同的目录中，并将 href 更改为“.css
”将index.html复制到项目根目录。
将基本 href 更改为 ., ./, ../

我在哪里寻找答案： https: //www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
GET 404 error for style.css not find
css and js files not find（服务器响应为在 iis7 上浏览应用程序时出现 404 状态

现在我正处于故障排除的“去散步并清醒头脑”阶段，但我想在这样做之前我应该在这里发帖。非常感谢任何帮助！

Answer 1

Que*_*tin 6

现在让我们看一下 CSS。对于他们所有人来说，问题都是一样的。

首先是路径。

index.html位于名为html 的目录中。
style.css位于名为css 的目录中。
这两个目录是兄弟目录。

现在的网址

HTML 文档链接到css/style.css
服务器收到/css/style.css的请求

因此，HTML 文档的 URL 必须类似于http://example.com/或http://example.com/index.html

这意味着html目录是HTTP 服务器的根目录。

这意味着 CSS 文件因为不在根目录中或在根目录下，所以没有 URL，因此您根本无法链接到它。

作为起点：

更改服务器配置，使根目录成为包含 html和css的目录

请求http://example.com/html/

更改 HTML 文档以链接到/css/style.css（前面带有斜杠以使其成为绝对路径）

然后考虑移动 HTML 文档的位置，以便它们的 URL 成为您想要的 URL。

然后对要链接到的其余文件的路径进行类似的更改。

归档时间：	3 年，5 月前
查看次数：	2276 次
最近记录：	3 年，5 月前