Angular 中的 HTTP Post 使用 FormData 导致意外的令牌错误

Question

我目前在使用 Angular 和 Capacitor 的 Ionic 应用程序的功能中有这一部分。 该函数用于使用 FormData 帖子上传文件。

        var data = new FormData();
        data.append(name, blobFile, "TestName");
        data.append('fileId', params.fileId);
        data.append('pagenumber', params.pageNum); 
        data.append('appid', this.appMod.appId);
        data.append('sessionid', this.appMod.sessionId);
        ...
        return this.http.post(
             webServiceUrl,
             data,
             {headers: new HttpHeaders({'Content-Type': undefined})},
             );

this.http是 Angular HttpClient 。 当此部分运行时，它会到达http.post但是返回的是以下错误

SyntaxError: Unexpected token o in JSON at position 1

检查网络活动，这篇文章实际上从未发出任何网络请求，让我相信这不是后端的问题

根据我们的测试，我们尝试设置'Content-Type': 'application/x-www-form-urlencoded'并在 HttpOptions 中添加responseType: 'text'但是两者都没有解决问题。 此外，我一再确保webServiceUrl是正确的。

我不知道是什么导致了这个问题，所以任何见解都会有所帮助

Answer 1

似乎有一些早期版本在检测或设置multipart/form-data方面存在问题- 您应该按照这个 SO answer使用的Content-Type 。

我已经验证，在 Angular 14 中使用您的确切代码时， Content-Type设置正确，如果在将FormData对象传递给HttpClient的post方法时未指定Content-Type ，则发送请求。

    return this.http.post(webServiceUrl, data, {
      // headers: new HttpHeaders({ 'Content-Type': '' }),
    });

您可能仍需要设置responseType: 'text'如前所述。

所以你的决议将是

1. 检查您的（可能是旧的）Angular 版本是否存在该区域的问题（参见上面的链接）
2. 没有设置Content-Type ，因为它是从传递的对象中推断出来的
3. 确保您已将responseType设置为与服务器的返回类型匹配
4. 检查您是否有任何可能覆盖Content-Type或导致冲突的HttpInterceptor s