Angular新手常见JSON语法错误求助：Unexpected token #

DevOps 小满

2026-5-26

嘿，作为刚踩过Angular各种坑的过来人，我太懂你这个错误的痛苦了！SyntaxError: Unexpected token # in JSON at position 0 这个报错本质是后端的body-parser组件在解析你的注册请求体时，拿到的内容根本不是合法的JSON——而且第一个字符就是#，直接触发了解析失败。

我来给你拆解排查和解决的步骤，都是我当初踩坑摸出来的：

第一步：先搞清楚你到底发了什么请求

打开浏览器的开发者工具（按F12就行），切换到「Network」标签，找到那个注册接口的POST请求，然后看这两个地方：

Request Headers里的Content-Type：如果是application/x-www-form-urlencoded，那说明你可能用了原生表单提交，而不是Angular的HttpClient；如果是application/json，再看下面的Request Payload，看看实际发送的内容是不是开头带#，或者根本不是JSON格式。

最常见的几个原因和解决办法

1. 前端用了原生表单提交，后端只配了JSON解析

很多新手刚接触Angular时，会直接写<form>标签加submit按钮提交，但原生表单默认会把数据以application/x-www-form-urlencoded格式发送（比如email=test%40example.com），但后端如果只加了app.use(bodyParser.json())来解析JSON，那body-parser会把这个urlencoded字符串硬当成JSON解析，一旦内容里有#（比如邮箱里带#号），就会触发这个错误。

解决办法：
要么改用Angular的HttpClient发送请求（推荐，更符合Angular的开发模式）：

// 组件里的代码示例
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

onSubmit(email: string) {
  // 直接传JSON对象，HttpClient会自动序列化并设置正确的Content-Type
  this.http.post('/api/register', { email: email }).subscribe(
    res => console.log('注册成功'),
    err => console.error('注册失败', err)
  );
}

要么给后端加上urlencoded格式的解析：

// 后端Node.js代码
const bodyParser = require('body-parser');
// 保留JSON解析
app.use(bodyParser.json());
// 新增urlencoded解析
app.use(bodyParser.urlencoded({ extended: true }));

2. 前端发送的请求体带了多余的注释或字符

有些新手会误以为JSON支持#或//注释，或者不小心在请求体开头加了#符号，比如写了这种错误代码：

// 错误示例：把带#注释的字符串当请求体发送
const body = `# {"email": "test@example.com"}`;
this.http.post('/api/register', body).subscribe(...);

这时候发送的请求体开头就是#，后端的JSON解析器直接懵了。

解决办法：确保你传给HttpClient的是纯JSON对象，不是带注释的字符串——Angular会自动帮你把对象序列化为合法的JSON字符串，完全不用手动拼。

3. 后端中间件顺序搞反了

如果你的后端有其他中间件在body-parser之前修改了请求体，比如某个中间件给请求体开头加了#注释，那也会触发这个错误。解决办法是调整中间件顺序，让body-parser的解析代码放在所有修改请求体的中间件之前。

最后再确认一遍

按上面的步骤排查完，再重新抓包看请求体，确保是合法的JSON格式（开头是{或[），Content-Type是application/json（如果用HttpClient的话），基本就能解决这个问题了！

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