.NET WebAPI项目加载自定义JS时出现Unexpected token '<'错误求助

问题分析 #

浏览器控制台报Syntax Error: Unexpected token '<'，本质是请求的JS文件返回了站点的404 HTML页面而非JS内容。这说明JS文件的路径配置、文件实际位置或静态文件服务存在问题。

解决方案 #

1. 核对文件实际存储位置

确认你的文件是否放在正确的目录下：

• ~/lib/qrcode.js 对应项目根目录下的 wwwroot/lib/qrcode.js
• ~/js/qr.js 对应项目根目录下的 wwwroot/js/qr.js
  如果文件不在上述位置，要么将文件移动到对应目录，要么修改<script>标签的src路径匹配实际位置。

2. 确保静态文件中间件正确配置

在Program.cs中，必须添加静态文件服务中间件，且顺序要正确：

var builder = WebApplication.CreateBuilder(args);

// 省略其他服务注册代码...

var app = builder.Build();

// 静态文件中间件要放在路由和授权中间件之前
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

// 省略其他端点配置...

app.Run();

如果缺少app.UseStaticFiles();，ASP.NET Core不会处理wwwroot下的静态文件请求，导致路由返回404 HTML页面。

3. 验证请求路径与响应内容

打开浏览器开发者工具（F12），切换到Network标签：

• 刷新页面，找到请求qrcode.js和qr.js的条目
• 查看请求的完整URL是否符合预期，比如https://localhost:xxxx/lib/qrcode.js
• 点击条目查看Response内容，如果是HTML页面，说明路径错误或文件不存在；如果是JS代码，再检查JS逻辑问题。

4. 确认JS依赖加载顺序

你的代码中已经将qrcode.js放在qr.js之前加载，这是正确的，因为qr.js依赖QRCode对象。如果后续仍出现QRCode is not defined错误，需检查qrcode.js是否正确加载。

补充检查 #

如果你的项目是WebAPI项目，但添加了Identity的Razor页面，需确保项目类型支持静态文件服务（默认WebAPI模板可能未包含UseStaticFiles，需要手动添加）。

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