生产 SPA 上的 Angular 应用程序 Http 解析错误

Posted

技术标签:

【中文标题】生产 SPA 上的 Angular 应用程序 Http 解析错误【英文标题】：Angular app Http Parsing Error on Production SPA 【发布时间】：2022-01-01 04:38:16 【问题描述】：

我在同一目录中有 Angular 和 dotnet 核心模板应用程序。

我必须在 azure 服务器上上传构建，但出现此错误。请指导我如何解决此问题。

生产：

ERROR Error: Uncaught (in promise): TR: "headers":"normalizedNames":,"lazyUpdate":null,"status":200,"statusText":"OK","url":"https://admin-dev.xperters.com/api/jobs/getJobs","ok":false,"name":"HttpErrorResponse","message":"Http failure during parsing for https://admin-dev.xperters.com/api/jobs/getJobs","error":"error":,"text":"<!DOCTYPE html><html lang=\"en\"><head>\n  <meta charset=\"utf-8\">\n  <title>Xperters</title>\n  <base href=\"/\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <link rel=\"icon\" type=\"image/x-icon\" href=\"https://files.xperters.com/images/favicon.webp\">\n  <link href=\"https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css\" rel=\"stylesheet\">\n  <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css\">\n<style>@charset \"UTF-8\";@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);@import url(https://fonts.googleapis.com/earlyaccess/notokufiarabic.css);htmlfont-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%bodymargin:0:after,:beforebox-sizing:border-boxhtmlfont-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)bodyfont-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fffbody,htmlmargin:0;min-height:100%;height:100%*box-sizing:border-box</style><link rel=\"stylesheet\" href=\"styles.15db04db7ed750153d26.css\" media=\"print\" onload=\"this.media='all'\"><noscript><link rel=\"stylesheet\" href=\"styles.15db04db7ed750153d26.css\"></noscript></head>\n\n<body class=\"dx-viewport\">\n  <app-root></app-root>\n<script src=\"runtime.03132d1f1e3c790b12ce.js\" defer></script><script src=\"polyfills.0087e061b20969056b57.js\" defer></script><script src=\"main.9d0e9744df940a9c2e1d.js\" defer></script>\n\n</body></html>"
at G (polyfills.0087e061b20969056b57.js:1)
at polyfills.0087e061b20969056b57.js:1
at Ee (main.9d0e9744df940a9c2e1d.js:1)
at T.invoke (polyfills.0087e061b20969056b57.js:1)
at Object.onInvoke (main.9d0e9744df940a9c2e1d.js:1)
at T.invoke (polyfills.0087e061b20969056b57.js:1)
at I.run (polyfills.0087e061b20969056b57.js:1)
at polyfills.0087e061b20969056b57.js:1
at T.invokeTask (polyfills.0087e061b20969056b57.js:1)
at Object.onInvokeTask (main.9d0e9744df940a9c2e1d.js:1)

本地主机：

ERROR Error: Uncaught (in promise): HttpErrorResponse: "headers":"normalizedNames":,"lazyUpdate":null,"headers":,"status":0,"statusText":"Unknown Error","url":"https://admin-dev.xperters.com/api/jobs/getJobs","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://admin-dev.xperters.com/api/jobs/getJobs: 0 Unknown Error","error":"isTrusted":true
at resolvePromise (zone.js:1213)
at zone.js:1120
at rejected (index.ts:1)
at ZoneDelegate.invoke (zone.js:372)
at Object.onInvoke (core.js:28692)
at ZoneDelegate.invoke (zone.js:371)
at Zone.run (zone.js:134)
at zone.js:1276
at ZoneDelegate.invokeTask (zone.js:406)
at Object.onInvokeTask (core.js:28679)

【问题讨论】：

【参考方案1】：

始终建议提供您正在处理的代码以及您遇到的错误，因为这有助于我们重现问题并为您提供解决方案。

所以现在我只能告诉您您可能遇到此问题的原因。如下所述，出现此错误有三个可能的原因。请检查所有原因并按照他们解决问题。

    无效的 JSON 格式

    您收到此错误的一个可能原因是您的 JSON 格式不正确。从网络选项卡复制响应并通过JSON validator 进行验证。

    错误的响应类型

    另一个原因可能是HttpClient默认将response转换为response.json()。如果您的 API 返回非 json 响应，您必须指定如下所示。

    return this.http.get/post(url, responseType: 'text').

    响应中不可见 \0 字符

    如果您已经在 J​​SON 验证工具中验证了 JSON 并且设置 responseType 没有帮助，请尝试从后端获取 json 并查看是否有任何 \0 字符。 要在 C# 中解决此问题，您可以执行以下操作：

    result.FieldWithStackTrace = result.FieldWithStackTrace?.Replace("\0", string.Empty);

我建议您阅读此Angular documentation 以获取更多信息。还要检查这个answer 和其他对类似堆栈溢出线程的响应。

【讨论】：

我没有收到任何回复。响应为空 你检查响应类型了吗？ 您好，感谢您的宝贵时间。我希望我的问题已经解决。实际上问题出在我现在修复的 angular.json 文件中。谢谢

以上是关于生产 SPA 上的 Angular 应用程序 Http 解析错误的主要内容，如果未能解决你的问题，请参考以下文章

基于requirejs和angular搭建spa应用

从 Angular 4 SPA 请求 Web api 时，范围声明为空

如何在 Wildfly 上使用 Angular 7 单页应用程序避免 404 错误

如何使一个公共事件总线在单个spa中交互两个angular4 / 5应用程序

Keycloak 列出 SPA 中的所有领域

SPA Angular index.html 未更新缓存（我使用缓存破坏）