Aurelia应用JSON解析报错：意外标记<，详情页传参数据异常

你遇到的SyntaxError: Unexpected token < in JSON错误，核心原因很明确：后端返回的不是合法的JSON数据，而是HTML内容（比如404错误页面、服务器内部错误页，这类页面的开头都是<标签，所以JSON解析器会直接报错）。咱们一步步排查解决：

一、先排查后端ASP.NET接口的问题 #

你的后端代码有几个容易踩坑的点，先逐一确认：

1. 参数名称要严格匹配
   后端接口的参数是int _id，如果前端请求时传的参数名是id（少了下划线），ASP.NET会无法正确绑定参数，可能导致后续逻辑异常，甚至直接返回错误页面。

2. 优化JSON返回方式
   你现在手动用JsonConvert序列化对象为字符串，再用Ok(customjson)返回，这时候ASP.NET会把这个字符串当成普通文本（Content-Type为text/plain）返回，而非标准的application/json。虽然部分场景下能解析，但更规范且不易出错的做法是直接返回对象，让框架自动处理序列化：

   [HttpGet("[action]")]
   public IActionResult GetDetail(int _id) {
       var b = new Detail();
       // 记得补充根据_id从数据库/数据源获取数据的逻辑
       // 比如 b = _detailService.GetById(_id);
       return Ok(b); // 直接返回对象，框架会自动序列化为JSON并设置正确的响应头
   }
   

3. 直接验证接口可用性
   打开浏览器地址栏，直接访问接口的完整地址（比如https://你的域名/你的控制器名/GetDetail?_id=1），看看返回的是不是合法的JSON。如果返回的是HTML页面（比如显示404），说明路由配置有问题，检查控制器的路由前缀、action名称是否正确。

二、检查前端Aurelia的请求逻辑 #

你的detail.ts的activate方法里的请求大概率存在问题，重点看这几点：

1. 参数传递要对应后端的参数名
   确保请求时传递的参数名是_id，和后端保持一致。比如正确的请求写法参考：

   activate(params: any) {
       // 假设params里的id是从列表页路由传过来的（比如路由配置是/detail/:id）
       return this.http.get('/你的控制器名/GetDetail', {
           params: { _id: params.id } // 这里映射为后端需要的_id参数
       })
       .then(response => {
           this.detailData = response.json();
       })
       .catch(error => {
           console.error('获取详情数据失败:', error);
       });
   }
   

2. 用浏览器开发者工具排查请求
   按F12打开开发者工具，切换到Network标签，找到请求详情数据的接口：

   • 查看请求的URL是否正确，有没有拼写错误
   • 查看响应状态码，如果是404/500，说明后端接口没找到或者出错了，返回的是错误HTML，这就是JSON解析失败的根源

三、其他常见排查点 #

• CORS配置问题：如果前端和后端域名不同，要确认后端是否正确配置了CORS。CORS配置错误会导致浏览器拦截请求，返回错误页面。
• 后端数据逻辑问题：别忘了在new Detail()之后，补充根据_id获取对应数据的逻辑，不然返回的是空对象，虽然是合法JSON，但详情页会没有内容。

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