Angular 如果出现400错误，如何调试或修复ng serve？

我想使用

ng serve

运行我的Angular应用程序，这样我可以进行一些开发并实时查看结果

我运行这个命令：

ngserve--ssl--open

编译/构建需要几秒钟的时间

它返回报告：

日期：2020-07-28T14:01:07.382Z-哈希：*********-时间：20167ms**Angular Live Development Server正在本地主机上侦听：4200，请在上打开浏览器https://localhost:4200/ **wdm：编译成功。

这将打开Chrome的应用程序https://localhost:4200/

我得到一个错误页面，如下所示

在开发人员工具中，有一个400错误请求错误响应。我不知道为什么。

我尝试在

ng serve

上使用

--verbose

选项，但我只得到了详细的构建消息—与请求本身无关，也与get是错误请求的原因无关

我的观点是：

Angular CLI: 8.3.29
Node: 10.16.3
OS: win32 x64
Angular: 8.2.14

---

要使用ssl证书为应用程序提供服务，您需要生成ssl证书

如果没有openssl命令，则可能需要下载该命令

在我的示例中，我使用自签名证书只是为了在开发环境（localhost）中运行应用程序。 只需使用以下命令生成新的自签名证书：

openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout localhost.key -days 3560 -out localhost.crt

只需回答提示的问题，它将生成两个文件：一个

.crt

和一个

.key

在angular application根文件夹中复制/粘贴生成的两个文件

之后，只需运行以下命令：

ng serve --ssl --ssl-key certs/localhost.key --ssl-cert certs/localhost.crt 

现在，它将在启用https的情况下为您的应用程序提供服务。此警告将显示，您可以忽略（对于开发环境），单击

advanced

之后，只需单击“继续本地主机”

以下是使用https访问的证据：

无ssl访问的说明 选项

-ssl

是使用

https

协议为应用程序提供服务的参数。如秘书长所述

为了解决这个问题，您需要从当前的

ng serve

命令调用中删除

-ssl

选项

调用应为：

ng serve

之后，您应该在不使用https的情况下访问应用程序。在应用程序url中

只需在匿名模式下打开一个浏览器和一个新选项卡（用于浏览器缓存清理）

请注意，正在使用默认端口（

端口4200

）。您必须根据当前配置访问url

---

正如@Jess（原始海报）所述，为了确保与后端的通信没有问题，您必须将CORS策略（在后端）启用到前端（当前）正在为您提供服务的当前地址http://localhost:4200).

能否从命令中删除

-ssl

选项？最终结果将是：

ng发球--open

。然后返回报告。嗨@Danizavtz，如果我删除

--ssl

选项，我会在Chrome中看到这个错误：这个站点无法提供安全连接。localhost发送了无效响应。ERR_SSL_PROTOCOL_error是的，您必须在不使用url栏中的

https

的情况下访问应用程序。尝试访问

http://localhost:4200

。尝试匿名模式和新标签（仅用于缓存清理）。我必须添加

http://localhost:4200

作为我的服务器应用程序CORS策略允许的主机，但现在它正在工作。如果没有

--ssl

选项，我的身份验证方案将无法工作，但幸运的是，我可以在匿名模式下使用我的应用程序，因此我现在不需要它。这是一个解决办法，但我现在可以做我需要做的开发。谢谢@Danizavtz.Update answer with a flow using self-signed certificates.+1感谢您的帮助。谢谢我保留“接受答案”，因为我最终会想使用ssl，但我现在可以解决这个问题。这在FireFox中适用，但在Chrome中不适用。奇怪。如果你看到指纹，我可以显示我的配置

http://localhost:4200