已解决：Uncaught SyntaxError: Unexpected token <

写在前面

在前端开发中，Uncaught SyntaxError: Unexpected token < 是一个常见的 JavaScript 错误。这个错误通常出现在浏览器尝试解析 JavaScript 文件时，遇到了不符合语法的字符 <。这种情况经常发生在以下几种场景中：

• 服务器返回了错误的响应：例如，当请求一个 JSON 文件时，服务器可能返回了一个 HTML 错误页面（如 404 页面），导致解析失败。
• 路径错误导致加载了错误的文件：如果脚本的路径配置错误，可能会加载到一个 HTML 文件而非预期的 JavaScript 文件。
• 跨域请求问题：在跨域请求中，未正确配置 CORS 可能导致服务器返回 HTML 错误页面。

问题描述

报错代码行：

Uncaught SyntaxError: Unexpected token <

当浏览器控制台中出现上述错误时，意味着 JavaScript 解析器在预期的地方遇到了一个 < 字符，这通常不是有效的 JavaScript 语法。这种错误会阻止脚本的正常执行，影响网页功能。

报错原因分析

1. 服务器返回了 HTML 错误页面：

   • 当浏览器请求一个 JavaScript 文件时，如果服务器无法找到该文件，通常会返回一个 404 错误页面。因为 404 页面是 HTML 格式，解析时会在开头遇到 < 字符，导致语法错误。

2. 脚本路径错误：

   • 如果在 HTML 中引用的脚本路径错误，浏览器可能会加载到一个 HTML 文件而非 JavaScript 文件，导致解析失败。

3. 跨域请求问题：

   • 在进行跨域请求时，如果服务器未正确配置 CORS（跨域资源共享），可能会返回一个错误页面，导致 JavaScript 解析错误。

4. 打包工具配置错误：

   • 使用 Webpack、Parcel 等打包工具时，如果配置不正确，可能会导致生成的 JavaScript 文件包含 HTML 内容。

5. 内容类型不正确：

   • 服务器未正确设置 Content-Type 响应头为 application/javascript，导致浏览器错误解析文件内容。

解决思路

1. 检查网络请求：

   • 使用浏览器的开发者工具（F12）中的“网络”标签，查看请求的 JavaScript 文件是否成功返回，确保状态码为 200。

2. 验证脚本路径：

   • 确认 HTML 文件中引用的脚本路径是否正确，确保路径指向实际存在的 JavaScript 文件。

3. 检查服务器配置：

   • 确认服务器正确配置了静态资源的路径，确保 JavaScript 文件能够被正确访问。

4. 处理跨域请求：

   • 如果涉及跨域请求，确保服务器端正确配置了 CORS，允许来自特定源的请求。

5. 检查打包工具配置：

   • 如果使用打包工具，检查配置文件是否正确，确保生成的 JavaScript 文件内容不包含 HTML。

6. 确认内容类型：

   • 确认服务器返回的 JavaScript 文件具有正确的 Content-Type 头，例如 application/javascript。

解决办法

1. 使用开发者工具检查网络请求

打开浏览器的开发者工具，切换到“网络”标签，重新加载页面，查看所有网络请求的状态码和返回内容。

• 状态码为 200：表示请求成功，检查返回的内容是否为有效的 JavaScript 代码。
• 状态码为 404 或其他错误：表示请求失败，需检查脚本路径是否正确，或服务器是否正确配置。

2. 验证脚本路径

确保在 HTML 中引用的脚本路径正确。例如：

<!-- 错误示例：路径错误导致加载 HTML 页面 -->
<script src="/js/app.js"></script>

<!-- 修正后：确保路径正确指向 JavaScript 文件 -->
<script src="/static/js/app.js"></script>

可以尝试在浏览器中直接访问脚本的 URL，确保能够正确加载 JavaScript 文件，而不是 HTML 错误页面。

3. 检查服务器配置

确保服务器正确配置了静态资源的路径。例如，在使用 Express.js 的情况下：

const express = require('express');
const app = express();

// 正确配置静态资源路径
app.use('/static', express.static('public'));

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

这样，引用 /static/js/app.js 会正确加载 public/js/app.js 文件。

4. 处理跨域请求

如果脚本是通过跨域请求加载的，确保服务器端正确配置了 CORS。例如，在 Express.js 中：

const express = require('express');
const cors = require('cors');
const app = express();

// 允许所有来源
app.use(cors());

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

或者，限制特定来源：

app.use(cors({
    origin: 'https://your-frontend-domain.com'
}));

5. 检查打包工具配置

如果使用 Webpack，确保配置正确，避免生成包含 HTML 内容的 JavaScript 文件。检查 output 配置和插件使用情况。例如：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    // 其他配置...
};

确保入口文件和输出路径正确，避免错误配置导致生成不正确的文件内容。

6. 确认内容类型

确保服务器在响应 JavaScript 文件时，设置了正确的 Content-Type 头。例如，在 Express.js 中：

app.get('/static/js/app.js', (req, res) => {
    res.type('.js'); // 自动设置 Content-Type 为 application/javascript
    res.sendFile(path.join(__dirname, 'public/js/app.js'));
});

或者，在 Nginx 配置中：

server {
    location /static/js/ {
        add_header Content-Type application/javascript;
        root /path/to/your/static/files;
    }
}

7. 使用原始文件进行测试

临时移除打包工具，直接使用原始的 JavaScript 文件进行测试，确保脚本本身没有问题。如果原始文件正常工作，则问题可能出在打包工具的配置上。

<!-- 直接引用原始文件进行测试 -->
<script src="/public/js/app.js"></script>

8. 处理模板渲染错误

如果脚本文件是通过模板引擎渲染的，确保渲染过程中不会插入 HTML 内容。例如，在使用 Django 时：

<!-- 错误示例：模板渲染错误导致返回 HTML -->
<script src="{% url 'app_js' %}"></script>

<!-- 确保视图正确返回 JavaScript 内容 -->
def app_js(request):
    response = HttpResponse(content_type='application/javascript')
    response.write("console.log('Hello, World!');")
    return response

总结

Uncaught SyntaxError: Unexpected token < 错误通常是由于浏览器尝试解析错误的文件类型导致的，例如服务器返回了 HTML 错误页面而非预期的 JavaScript 文件。通过检查网络请求、验证脚本路径、确认服务器配置、处理跨域问题以及确保内容类型正确，可以有效解决此类错误。确保前后端协同工作，避免路径和配置错误，是预防和解决此问题的关键。