使用 npm 通过 https 提供“localhost”Web 客户端答案

【问题标题】：Serve a 'localhost' web client over https using npm使用 npm 通过 https 提供“localhost”Web 客户端
【发布时间】：2017-10-29 05:41:31
【问题描述】：

已解决：所以解决方案实际上很简单。首先，我进入 webpack 并添加了“--https”标志。但是因为我使用的是来自主题森林的模板，所以模板开发人员在 localhost:3003 中硬编码为 servefiles。我只是搜索了 3003 并在 webpack.config 中找到了一行代码，我将其更改为 'https://localhost:3003'，这就是我需要做的一切！！

我正在使用 Angular 构建前端客户端。我在调用 API 时遇到了问题，因为服务器要求所有请求都通过 https 发送。

现在，当使用“npm start”时，我的项目在http://localhost:3003 上运行。如何将其更改为 https://localhost:3003？

我对服务器和 SSL 没有经验 - 所以只是想在开发过程中找出最简单的方法。

我正在使用 Angular 和 webpack 服务器。下面看看我的 package.json

"tslint": "tslint",
"server:hmr": "npm run server -- --inline --hot",
"server": "webpack-dev-server --open --progress --profile --watch --port 3003",
"start": "npm run server",
"start:hmr": "npm run server:hmr"

更新：仍然没有弄清楚这一点。我在 webpack 上运行（不是 angular cli）。到目前为止，我尝试过的解决方案（例如添加 -https 标志或 serve-https npm 库）都没有奏效。这两个选项都将通过 https 加载我的 Web 应用程序的文件 - 但我收到 404 错误“无法加载 webpack.js”

【问题讨论】：

Webpack Dev Server running on HTTPS/Web Sockets Secure的可能重复
您现在正在运行本地实例？如果是，请先部署您的应用，然后通过 https 加载。我在 gh-pages 上部署了一个这样的应用程序。你可以查看rahulrsingh09.github.io/AngularConcepts
我可以部署我的应用程序来解决这个问题 - 但是我将如何继续从开发环境通过 https 调用 api？我想要一种从我的本地实例/本地主机通过 https 进行调用的方法

标签： angular https npm webpack server

【解决方案1】：

使用 https 标志运行您的 webpack-dev-server。

webpack-dev-server --open --https --progress --profile --watch --port 3003

【讨论】：

这不起作用，因为我收到混合内容错误：混合内容：“localhost:3003”处的页面是通过 HTTPS 加载的，但请求了不安全的脚本“localhost:3003/js/main.js”。此请求已被阻止；内容必须通过 HTTPS 提供。有没有办法解决这个问题？
请检查您是否使用“http://”请求 JavaScript 文件。您应该使用“https://”来请求 .js 文件。

【解决方案2】：

试试serve-https，它是一个简单的HTTPS静态文件服务器：https://www.npmjs.com/package/serve-https

【讨论】：

是的，看起来不错，但我不知道如何让它工作。我如何将它集成到我的应用程序中？我是否将“serve-https -p 3003”与 npm start 结合使用？
该页面上给出了说明和示例。您使用 serve-https 而不是 npm-start。
是的，我使用了 serve-https -p 3003 仍然没有运气。我只看到我的应用程序的目录 - 我可以单击 SRC 文件夹，但随后出现 404 未找到 webpack。（索引）：43 GET localhost.daplie.me:3003/webpack-dev-server.js 404（未找到）
对不起，我对服务器端的事情了解不多，只是想找出让 https 工作的最简单方法