本地部署Bootstrap Icons失效，遇CORS报错求助

1. 必须通过本地服务器访问页面 #

直接双击打开HTML文件会使用file://协议加载，此时浏览器会将origin设为null，触发CORS限制。你需要通过本地服务器的URL（如http://127.0.0.1:8000或http://localhost）访问页面：

• Python环境：在项目根目录运行python -m http.server（Python3）或python -m SimpleHTTPServer（Python2），之后访问http://127.0.0.1:8000
• Node.js环境：安装http-server后运行http-server，访问终端输出的对应地址
• XAMPP/WAMP环境：将项目放到服务器根目录（如XAMPP的htdocs文件夹），通过http://localhost/你的项目文件夹名访问

2. 检查Bootstrap Icons的文件结构与引入路径 #

下载的Bootstrap Icons压缩包解压后，要保证项目文件结构和CSS内的字体路径匹配：

• 标准结构示例：

  项目根目录/
  ├── index.html
  ├── bootstrap-icons-1.11.3/
  │   ├── font/
  │   │   ├── bootstrap-icons.css
  │   │   └── fonts/
  │   │       ├── bootstrap-icons.woff
  │   │       └── bootstrap-icons.woff2
  

• HTML中引入CSS的路径要准确：

  <link rel="stylesheet" href="./bootstrap-icons-1.11.3/font/bootstrap-icons.css">
  

  避免层级错误（比如漏写font/或多嵌套目录）导致CSS无法找到字体文件。

3. 给本地服务器配置CORS头（若仍报错） #

如果已经通过服务器访问但CORS问题依旧，需要给服务器添加Access-Control-Allow-Origin头：

• Apache（XAMPP/WAMP）：在项目目录创建.htaccess文件，添加以下内容（确保Apache的mod_headers模块已启用）：

  Header set Access-Control-Allow-Origin "*"
  

• Nginx：在服务器配置的server块中添加：

  add_header Access-Control-Allow-Origin *;
  

• Python自定义服务器：创建一个带CORS头的服务器脚本，运行后访问http://127.0.0.1:8000：

  from http.server import HTTPServer, SimpleHTTPRequestHandler
  
  class CORSRequestHandler(SimpleHTTPRequestHandler):
      def end_headers(self):
          self.send_header('Access-Control-Allow-Origin', '*')
          super().end_headers()
  
  if __name__ == '__main__':
      HTTPServer(('', 8000), CORSRequestHandler).serve_forever()
  

4. 强制清除浏览器缓存 #

浏览器可能缓存了旧的资源路径或CORS状态，按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存后再测试图标是否正常显示。

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