已解决Uncaught SyntaxError: Unexpected token ‘＜‘

'# 已解决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.js

2. 服务端代码（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类型；对于复杂的项目，建议使用打包工具进行代码管理和优化。通过这些实践，可以有效避免该错误的发生，提升代码质量和开发效率。

已解决Uncaught SyntaxError: Unexpected token ‘＜‘

一、背景与问题

二、基本原理

三、环境准备

四、核心实现

1. 错误代码示例

2. 正确代码示例

3. 动态加载JS内容

五、完整案例

1. 项目结构

2. 服务端代码（server.js）

3. 前端代码（index.html）

4. JS文件（data.js）

六、源码解析

七、进阶使用

1. 使用`type="module"`加载模块

2. 使用动态`src`属性

八、性能与工程实践

1. 性能优化

2. 安全风险

九、常见问题与踩坑

1. 常见错误场景

2. 典型错误示例

十、最佳实践

1. 推荐方案

2. 使用场景

十一、总结

评论已关闭

推荐阅读

一、背景与问题

二、基本原理

三、环境准备

四、核心实现

1. 错误代码示例

2. 正确代码示例

3. 动态加载JS内容

五、完整案例

1. 项目结构

2. 服务端代码（server.js）

3. 前端代码（index.html）

4. JS文件（data.js）

六、源码解析

七、进阶使用

1. 使用type="module"加载模块

2. 使用动态src属性

八、性能与工程实践

1. 性能优化

2. 安全风险

九、常见问题与踩坑

1. 常见错误场景

2. 典型错误示例

十、最佳实践

1. 推荐方案

2. 使用场景

十一、总结

评论已关闭

推荐阅读

1. 使用`type="module"`加载模块

2. 使用动态`src`属性