如何允许本地主机之外的访问

Posted 2023-03-13

【中文标题】如何允许本地主机之外的访问

【英文标题】：How to allow access outside localhost

【发布时间】：2017-09-15 11:36:53

【问题描述】：

如何允许在 Angular2 的本地主机之外进行访问？我可以在localhost:3030/panel 轻松导航，但是当我写我的 IP（例如10.123.14.12:3030/panel/）时无法导航。

您能告诉我如何解决它吗？我没有使用npm（节点项目管理 - 节点安装/节点启动）来安装和运行项目。

如果你愿意，我可以提供我的package.json 和index.html。

【问题讨论】：

你使用 ng serve 吗？

是的，我正在使用 ng 服务器

你试过 ng serve --host 10.123.14.12 吗？

我厌倦了服务，它说“我必须在一个 angular--cli 项目中才能使用服务命令”。

【参考方案1】：

没有package.json 需要更改。

对我来说，它可以使用：

ng serve --host=0.0.0.0 --port=5999 --disable-host-check

主机：http://localhost:5999/

【参考方案2】：

在 Angular 版本 11（可能还有一些更早的版本）中，--public-host 选项对我有用，例如：

$ ng serve --host 0.0.0.0 --public-host app.mypublicdomain.com

【参考方案3】：

ng serve --host 0.0.0.0 将允许您使用您的 ip 而不是 localhost 连接到 ng 服务。

打开浏览器到 :4200

使用ng serve --host 0.0.0.0 --disable-host-check 将允许您使用您的域而不是本地主机连接到 ng 服务。

打开浏览器到 :4200

【参考方案4】：

使用 ng serve --host 0.0.0.0 命令解决了我的问题。使用 192.168.x.x:5200 从另一台机器访问应用程序。

另外，检查客户端和服务器上的防火墙规则（暂时禁用防火墙或创建规则以允许流量）

【参考方案5】：

我只是在我的项目中编辑angular.json 文件，如下所示，它可以工作

...

    "serve": 
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": 
      "browserTarget": "project:build",
      "host": "0.0.0.0"
    ,
...

【参考方案6】：

ng serve --open --host 0.0.0.0 --disable-host-check

这对我来说非常有效（即使使用公共 IP 和指向该 IP 的 A 主机）。

【参考方案7】：

使用ng serve --host 0.0.0.0 将允许您使用您的IP 而不是localhost 连接到ng serve。

编辑

在较新版本的 cli 中，您必须提供本地 IP 地址

编辑 2

在较新版本的 cli（我认为是 v5 及更高版本）中，您可以再次使用 0.0.0.0 作为 ip 来托管它，以便您网络上的任何人与之交谈。

附注 确保在您的操作系统设置中将您的连接设置为公开。

【讨论】：

它说“你必须在一个 angluar--cli 项目中才能使用 serve 命令”，当我写 ng sreve 时带有红色警告，还有一条黄色消息表明我正在运行Node 6.2.2 版本，写完 ng serve 以后 CLI 的未来版本将不再支持

第一，尝试更新节点，第二，尝试重启你的终端/vscode

我将它从包 json 更新为 6.0.46 为“@types/node”：“6.0.46”，但仍然收到相同的消息

我不明白人们如何给我的问题投票，我不知道是谁做的。即使您错误地理解了问题并给了我错误的答案，他们仍然给予“-”声誉。我自己找到了答案。我应该添加 ""server": "webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000"," 到 packagejson

这对我有用：ng serve --open --host 0.0.0.0 --disable-host-check

【参考方案8】：

使用ng serve --host<Your IP> --port<Required if any>。

ng 服务 --host=192.111.1.11 --port=4545.

您现在可以在编译结束时看到以下行。

Angular Live Development Server 正在侦听 192.111.1.11:4545，请在 http://192.111.1.11:4545/ ** 上打开您的浏览器。

【参考方案9】：

如果你在 Docker 中遇到同样的问题，那么你可以在 Dockerfile 中使用下面的CMD。

CMD ["ng", "serve", "--host", "0.0.0.0"]

或完整的 Dockerfile

FROM node:alpine
WORKDIR app
RUN npm install -g @angular/cli
COPY . .
CMD ["ng", "serve", "--host", "0.0.0.0"]

【参考方案10】：

运行命令

ng serve --host=0.0.0.0 --disable-host-check

这将禁用主机检查并允许使用 IP 地址从外部（而不是本地主机）访问

【讨论】：

我不需要 --disable-host-check。 ng serve --host 0.0.0.0 对我来说很好。主机检查应该做什么？

我曾经需要disabled-host-check 否则我收到消息“无效的主机标头”

有没有办法在配置文件中定义它以避免每次都提到它？

【参考方案11】：

对我来说，它可以使用“ng serve --open --host 0.0.0.0”但有一个警告

---

警告：这是一个用于测试或调试 Angular 应用程序的简单服务器 本地。尚未对其安全问题进行审查。

将此服务器绑定到打开的连接可能会影响您的应用程序或 计算机。使用与传递给“--host”标志的主机不同的主机可能会导致 websocket 连接问题。如果是这样，您可能需要使用“--disableHostCheck” 案例。

【参考方案12】：

创建proxy.conf.json 并粘贴此配置

  
"/api/*":
        
        "target": "http://localhost:7070/your api project name/",
        "secure": false,
        "pathRewrite": "^/api" : ""
    

替换：

let url = 'api/'+ your path;

从 CLI 运行：

ng serve  --host port.number —-proxy-config proxy.conf.json

【参考方案13】：

可能对某人有所帮助的快速解决方案：

将此行添加为 start ng serve --host 0.0.0.0 --disable-host-check 的值 在你的package.json

例如：

"ng": "ng",
"start": "ng serve --host 0.0.0.0 --disable-host-check",
"build": "ng build",

然后只需执行start 或npm run start

您将能够从其他本地 IP 访问您的项目。

【参考方案14】：

问题是防火墙。如果您在 Windows 上，请确保允许节点通过

【讨论】：

即使在使用 ng serve --host 0.0.0.0 服务后，我也无法从同一网络访问。但是正如您提到的，防火墙许可是问题所在。感谢您花时间分享这个。

【参考方案15】：

您可以使用以下命令使用您的 ip 访问。

ng serve --host 0.0.0.0 --disable-host-check

如果你使用 npm 并且想避免每次都运行命令，我们可以在 scripts 部分的 package.json 文件中添加以下行。

"scripts": 
    ...
    "start": "ng serve --host 0.0.0.0 --disable-host-check"
    ...

然后您可以使用以下命令运行您的应用程序，以便从同一网络中的其他系统访问。

npm start

【讨论】：

现在在我的版本 Angular 8 中是 -disableHostCheck=true|false。

如果您不使用 ng serve，这将起作用

【参考方案16】：

对于使用节点项目管理器的人来说，添加到 package.json 的这一行就足够了。对于 Angular CLI 用户，mast3rd3mon 的回答是正确的。

你可以添加

"server": "webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000"

到 package.json

【参考方案17】：

您还可以使用 ngrok 内省通过隧道运行的所有 HTTP 流量 ，然后您可以使用ngrok http --host-header=rewrite 4200 公开

【参考方案18】：

Mac 用户：

进入系统偏好设置 -> 网络 -> Wi-Fi 复制下面的IP地址状态（通常是192.168.1.x） 将其粘贴到您的 ng 服务中，例如：ng serve --host 192.168.1.x

那么你必须能够通过192.168.1.x:4200在其他设备上看到你的页面。

【讨论】：

曾经为我工作，现在不再工作了。想知道为什么。我觉得我已经尝试了一切！我的防火墙已禁用。 ng serve --host 10.xxx --disable-host-check / ng serve --host 0.0.0.0 --disable-host-check -> 无法从与 10.xxx 位于同一网络的 Windows 远程计算机访问:4200

在 Angular 7 和 MacOS 10.14.6 中运行良好

不管怎样，截至 2019 年 10 月，已接受的答案在 MacOS 上对我有效。

这对我有用，经过广泛搜索后，这是我看到的唯一指定此关键步骤的答案：在您的 iphone safari 浏览器的地址栏中，插入：192.168。 1.x:4200 ，其中 x = ip 地址的最后一位。包括“：4200”对我来说是不同的。

@RafaëlMoser 你解决了吗？我有同样的问题，我真的很无能。

【参考方案19】：

打开 cmd 并导航到项目位置，即为项目运行 npm install 或 ng serve 的位置。

然后运行命令 - ng serve --host 10.202.32.45 其中10.202.32.45 是您的 IP 地址。

您将能够通过10.202.32.45:4200 访问您的页面，其中 4200 是您的端口号。

注意：如果您使用此命令为您的应用提供服务，那么您将无法访问localhost:4200

【讨论】：

是否可以双向访问？

它工作了谢谢..我想我看错了 IP 地址

知道这听起来很傻，但请确保您的手机使用与开发机器相同的 wifi 网络。我使用的是访客网络... +1 是唯一对我有用的答案。