外部样式表无法链接，访问localhost返回Cannot GET /styles.css

从你遇到的Cannot GET /styles.css错误来看，核心问题是你的本地服务器没有正确托管这个CSS文件，导致浏览器请求时返回404。以下是具体的排查和解决步骤：

1. 核对文件目录结构 #

确保styles.css和你的HTML文件处于同一目录层级，或者放在服务器指定的静态文件根目录下。比如正确的项目结构应该是：

你的项目文件夹/
├── index.html
└── styles.css

如果你的服务器有专门的静态文件目录（比如public、static），必须把styles.css放到这个目录里，HTML里的href="styles.css"才能正确指向它。

2. 检查服务器的静态文件配置 #

不同服务器的静态文件托管配置不同，以下是常见场景的设置：

• Node.js/Express：必须添加静态文件中间件，把包含CSS的目录设为托管目录：

  const express = require('express');
  const app = express();
  // 托管当前项目目录下的所有静态文件
  app.use(express.static(__dirname));
  app.listen(8080);
  

• Python 内置HTTP服务器：启动服务器时，要在包含styles.css的目录下执行命令：

  # Python 3
  python -m http.server 8080
  # Python 2
  python -m SimpleHTTPServer 8080
  

• VS Code Live Server插件：右键点击HTML文件选择「Open with Live Server」，插件会自动将HTML所在目录设为服务器根目录，只要CSS和HTML同目录即可正常加载。

3. 确认文件名大小写匹配 #

Linux、macOS系统区分文件名大小写，检查HTML里的styles.css和实际文件名完全一致，避免出现Styles.css、STYLES.CSS这类大小写不匹配的情况。

4. 强制刷新浏览器缓存 #

浏览器可能缓存了旧的404响应，按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，再查看网络请求状态。

内容的提问来源于stack exchange，提问作者Mores