已解决Uncaught SyntaxError: Unexpected token ‘＜‘
一、背景与问题
在Web开发中，Uncaught SyntaxError: Unexpected token '<' 是一个常见但容易被忽视的错误。这个错误通常出现在浏览器解析JavaScript代码时，遇到一个预期为JS语法的字符却解析为HTML标签（如 <）时触发。例如：
<script>
console.log("Hello World");
<div id="test">Invalid HTML</div>
</script>浏览器会将整个<div>标签视为JS代码，导致语法错误。这类问题在以下场景中尤为常见：
- HTML中直接嵌入JS代码：开发人员误将HTML结构写在JS代码中
- 服务器返回错误内容：服务器将HTML文件作为JS文件返回（如MIME类型配置错误）
- 动态加载JS内容：通过
fetch或XMLHttpRequest获取非JS内容时未正确处理 - 模板引擎混合使用不当：如在Vue/React中未正确区分JS和模板语法
二、基本原理
浏览器的解析流程决定了这个错误的根本原因。当浏览器解析HTML时，会按照以下顺序处理：
- HTML解析器：先解析HTML结构，遇到
<script>标签时会切换到JS解析器 - JS解析器：对
<script>标签内的内容进行ECMAScript语法分析 - 错误检测：如果解析器在JS代码中发现HTML标签（如
<），就会抛出Unexpected token '<'错误
这个错误的本质是JS解析器和HTML解析器的协作失效。例如：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<script>
console.log("Hello"); // 正常执行
<div id="test">Error</div> <!-- 触发错误 -->
</script>
</body>
</html>在上述代码中，<div>标签会破坏JS解析器的语法分析流程。
三、环境准备
为了深入研究这个问题，我们需要搭建一个简单的开发环境：
# 安装Node.js和Express
npm init -y
npm install express创建基本的服务器结构：
// server.js
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send(`
<!DOCTYPE html>
<html>
<body>
<script>
console.log("Hello");
<div id="test">Error</div>
</script>
</body>
</html>
`);
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});四、核心实现
1. 错误代码示例
<script>
console.log("Hello World");
<p>This is invalid HTML</p>
</script>错误分析：<p>标签会破坏JS语法，导致解析器在<处报错。
2. 正确代码示例
<script>
console.log("Hello World");
document.getElementById('test').innerText = "Valid";
</script>
<div id="test"></div>关键点：确保JS代码中不包含HTML标签，HTML结构和JS代码分开展示。
3. 动态加载JS内容
// 前端代码
fetch('/data.js')
.then(response => response.text())
.then(data => {
const script = document.createElement('script');
script.textContent = data;
document.head.appendChild(script);
});注意事项：
- 必须确保
/data.js返回的是纯JS代码 - 如果返回的是HTML内容，会导致
Unexpected token '<'错误 - 建议使用
type="module"或src属性加载外部JS文件
五、完整案例
1. 项目结构
project/
├── server.js
├── index.html
└── data.js2. 服务端代码（server.js）
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.get('/data.js', (req, res) => {
res.setHeader('Content-Type', 'application/javascript');
res.sendFile(__dirname + '/data.js');
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});3. 前端代码（index.html）
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="content"></div>
<script>
fetch('/data.js')
.then(response => response.text())
.then(data => {
const script = document.createElement('script');
script.textContent = data;
document.head.appendChild(script);
});
</script>
</body>
</html>4. JS文件（data.js）
console.log("Loaded from external file");
document.getElementById('content').innerText = "Content loaded";运行效果：页面会正确加载并执行外部JS文件，不会出现语法错误。
六、源码解析
以动态加载JS的案例为例，关键代码解析如下：
// 创建script元素
const script = document.createElement('script');
script.textContent = data; // 将返回的JS代码注入
document.head.appendChild(script);关键点：
- 必须确保
data变量的内容是纯JS代码 - 如果
data包含HTML标签，会导致Unexpected token '<'错误 - 使用
textContent而非innerHTML可以防止XSS攻击
七、进阶使用
1. 使用type="module"加载模块
<script type="module">
import { fetchData } from './data.js';
fetchData().then(data => {
document.getElementById('content').innerText = data;
});
</script>优势：
- 自动处理模块加载
- 支持ES6模块语法
- 可避免直接注入JS代码
2. 使用动态src属性
const script = document.createElement('script');
script.src = '/data.js';
document.head.appendChild(script);注意：
- 需要确保服务器返回正确的
Content-Type: application/javascript - 无法直接控制加载内容，需依赖服务器端配置
八、性能与工程实践
1. 性能优化
- 预加载关键JS：使用
<link rel="preload">预加载关键JS文件 - 代码分割：使用Webpack的Code Splitting技术分割JS文件
- 懒加载：按需加载非关键JS代码
- 压缩资源：使用Terser压缩JS代码，减少传输体积
2. 安全风险
- XSS注入：直接注入用户提供的JS代码可能导致XSS攻击
- 内容污染：错误的HTML内容注入会破坏JS执行环境
- MIME类型欺骗：服务器错误配置可能导致内容类型被篡改
防御措施：
- 使用
textContent而非innerHTML - 对用户输入进行严格校验
- 配置服务器正确MIME类型
九、常见问题与踩坑
1. 常见错误场景
| 场景 | 问题描述 | 解决方案 |
|---|---|---|
| 1 | 直接在HTML中写JS代码 | 使用<script>标签包裹JS代码 |
| 2 | 服务器返回错误内容 | 检查服务器MIME类型配置 |
| 3 | 动态加载非JS内容 | 确保返回内容类型为application/javascript |
| 4 | 模板引擎混合使用 | 明确区分JS和模板语法 |
2. 典型错误示例
<!-- 错误示例 -->
<script>
console.log("Hello");
<p>Invalid HTML</p>
</script>错误原因：<p>标签破坏JS语法
修复方案：
<!-- 正确示例 -->
<script>
console.log("Hello");
document.write("<p>Valid HTML</p>");
</script>十、最佳实践
1. 推荐方案
- 严格分离JS和HTML：使用
<script>标签包裹JS代码 - 使用模块化开发：通过ES6模块或打包工具管理代码
- 配置服务器正确MIME类型：确保JS文件返回
application/javascript - 动态加载时校验内容：在注入前进行内容类型校验
- 使用安全的注入方式：优先使用
textContent而非innerHTML
2. 使用场景
| 场景 | 是否推荐 | 说明 |
|---|---|---|
| 静态页面 | 推荐 | 保证代码结构清晰 |
| 动态加载 | 推荐 | 需严格校验内容 |
| 模块化开发 | 推荐 | 提高可维护性 |
| 混合模板引擎 | 不推荐 | 需严格区分语法 |
十一、总结
Uncaught SyntaxError: Unexpected token '<' 是Web开发中常见的语法错误，其根源在于JS解析器和HTML解析器的协作失效。通过深入分析其原理，我们可以采取以下措施：
- 严格分离JS和HTML内容，确保JS代码不包含HTML标签
- 配置服务器正确返回MIME类型，避免内容类型被篡改
- 使用动态加载时进行内容校验，确保返回的是纯JS代码
- 采用模块化开发，提高代码可维护性
- 注意安全注入，避免XSS攻击
在实际开发中，应根据具体场景选择合适的解决方案。对于静态页面，推荐使用<script>标签包裹JS代码；对于动态加载内容，需确保服务器返回正确的MIME类型；对于复杂的项目，建议使用打包工具进行代码管理和优化。通过这些实践，可以有效避免该错误的发生，提升代码质量和开发效率。