在HTML中实例化JS类时出现404错误的原因及解决方法

错误成因 #

你遇到的404错误根源完全在于HTML头部的<base>标签：

<base href="http://chessboardjs.com/" />

这个标签会强制让页面中所有相对路径的资源请求都定向到http://chessboardjs.com/这个外部域名下。而你的class.js是本地文件夹里的文件，服务器会去chessboardjs.com的根目录找这个不存在的文件，自然返回404错误。

另外你提到所有文件都存在同一文件夹，但当前代码里引用的css/chessboard.css、js/chess.js等都是子文件夹路径，这也会导致这些资源请求失败（要么是你描述的文件结构有误，要么是路径需要调整）。

修复步骤 #

1. 移除或修正<base>标签
   最直接的解决方法是删掉这个<base>标签，浏览器会默认以当前HTML文件所在的文件夹作为基准路径加载资源。如果确实需要保留base标签，把它的值改成本地当前文件夹的相对路径：

   <base href="./" />
   

2. 对齐资源路径与实际文件结构
   既然你说所有文件都在同一文件夹，那需要把所有资源引用的路径改成直接的文件名，比如：

   • 将<link rel="stylesheet" href="css/chessboard.css" />改为<link rel="stylesheet" href="chessboard.css" />
   • 将<script src="js/chess.js"></script>改为<script src="chess.js"></script>
     以此类推，确保所有src和href指向的都是当前文件夹下的实际文件名。

3. 验证文件存在性
   最后确认class.js确实和HTML文件在同一个文件夹里，文件名拼写完全一致（注意区分大小写，比如Class.js和class.js在Linux等系统里是不同的文件）。

修改后的HTML代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>Chess</title>
  <link rel="stylesheet" href="chessboard.css" />
</head>
<body>
  <script src="chess.js"></script>
  <div id="board" style="width: 400px"></div>
  <p>PGN: <span id="pgn"></span></p>
  <script src="json3.min.js"></script>
  <script src="jquery-1.10.1.min.js"></script>
  <script src="chessboard.js"></script>
  <script src="class.js"></script>
  <script>
    var pgnEl = $('#pgn');
    const x = new Puzzle("test", "test");
    pgnEl.html(x.fenStart);
  </script>
</body>
</html>

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