Angular4聊天应用Firefox中HTTP请求JSON解析失败求助

我来帮你梳理下这个问题，你遇到的JSON.parse: unexpected end of data错误，本质是Firefox拿到的响应内容不是有效的JSON（甚至是空内容）。虽然Chrome和Opera正常，但大概率是请求本身的问题，或者服务器对Firefox的请求处理有差异。结合你的代码，我整理了几个排查和修复方向：

1. 先修复参数重复的问题（最可能的根因） #

看你的getLatestConversations代码，你同时做了重复的参数传递操作：

• 在URL里手动拼接了所有参数（filter=${p.filter}&...）
• 又通过params选项传入了一模一样的参数（createHttpParams(p)）

这会导致请求URL里出现重复的键值对，比如?filter=xxx&filter=xxx&search=yyy&search=yyy...。Chrome可能会自动忽略重复参数，让服务器正常处理，但Firefox会原封不动发送请求，服务器大概率无法正确解析这种重复参数，最终返回空内容或错误响应，直接导致JSON解析失败。

修复方法：去掉URL里的手动参数拼接，只用HttpParams传参：

public getLatestConversations(p: { filter: string, search: string, page_index: number, page_count: number }): Observable<{}> { 
  // 直接用基础URL，不再手动拼接参数
  return this.http.get(this.messagesUrl, { params: this.createHttpParams(p) }); 
} 

这样请求参数会被Angular正确编码并传递，彻底避免重复参数问题。

2. 用Firefox开发者工具确认实际响应细节 #

打开Firefox的F12开发者工具，切换到「网络」面板，找到这个getLatestConversations请求：

• 查看「请求」标签：确认请求URL格式是否正确，你添加的Accept请求头是否存在（Content-Type对GET请求其实不需要，可以去掉试试）
• 查看「响应」标签：看看服务器到底返回了什么——如果是空内容、HTML错误页面（比如500报错），那问题出在服务器端；如果是有效的JSON，再排查Angular的解析逻辑。

3. 检查参数编码问题 #

如果你的filter或search参数包含特殊字符（比如空格、中文、&等），手动拼接URL时会导致URL格式无效。虽然你用了createHttpParams，但之前的重复参数问题让手动拼接的未编码参数生效，Firefox对无效URL的处理和Chrome不同，可能直接导致请求失败。

用上面的修复方法（只靠HttpParams传参）就能解决编码问题，因为Angular会自动对参数值做URL编码。

4. 排查服务器端的浏览器兼容逻辑 #

如果上面的方法都试过还是不行，可以尝试在拦截器里统一设置User-Agent，模拟Chrome的请求头，看看是不是服务器对Firefox的UA做了特殊处理，导致返回异常内容。

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