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

Question

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

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

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

Answer 1

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

编辑

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

编辑 2

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

作为旁注 确保在 OS 设置中将连接设置为 Public。

Answer 2

对于使用 node project manager 的人来说，将这一行添加到 package.json 就足够了。对于 angular CLI 用户，mast3rd3mon 的回答是正确的。

您可以添加

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

到package.json

Answer 3

Mac 用户：

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

那么你一定可以通过192.168.1.x:4200在其他设备上看到你的页面。

Answer 4

运行命令

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

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

Answer 5

打开 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

Answer 6

我只是在我的项目中编辑 angular.json 文件，如下所示，它有效

...

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

Answer 7

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

公开

Answer 8

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

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

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

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

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

npm start

Answer 9

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

Answer 10

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

将此行添加为开始值 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 访问您的项目。

Answer 11

创建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

Answer 12

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

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

将此服务器绑定到打开的连接可能会危及您的应用程序或电脑。使用与传递给“--host”标志的主机不同的主机可能会导致网络套接字连接问题。如果是这样，您可能需要使用“--disableHostCheck” 案例.

Answer 13

不需要 package.json 更改。

对我来说，它可以使用：

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

主机：http://localhost:5999/

Answer 14

使用ng serve --host<Your IP> --port<Required if any>.
ng serve --host=192.111.1.11 --port=4545.
您现在可以在编译结束时看到以下行。

Angular Live Development Server is listening on 192.111.1.11:4545, open your browser on http://192.111.1.11:4545/ **.

Answer 15

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

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

或完成Docker文件

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

Answer 16

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

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

Answer 17

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

这对我来说非常有效（即使使用 public IP 并且 A 主机指向该 IP）。

Answer 18

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

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

Answer 19

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

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

打开浏览器访问 :4200

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

How to allow access outside localhost

typescript

angular

ng-build