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

Question

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

你能告诉我如何解决它吗？我没有使用npm(node project manage - node install/node start) 来安装和运行项目。

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

score 556 · Accepted Answer

Usingng serve --host 0.0.0.0将允许您ng serve使用您的 ip 而不是localhost.

编辑

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

编辑 2

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

作为旁注 确保您的连接在您的操作系统设置中设置为公共。

score 57 · Accepted Answer

Mac 用户：

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

然后您必须能够通过192.168.1.x:4200.

score 53 · Accepted Answer

运行命令

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

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

score 20 · Accepted Answer

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

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

如果您正在使用 npm 并且希望避免每次都运行该命令，我们可以将以下行添加到脚本部分的package.json文件中。

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

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

npm start

score 18 · Accepted Answer

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

...

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

score 9 · Accepted Answer

9

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

于 2019-07-20T03:42:38.930 回答

score 7 · Accepted Answer

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

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"]

score 6 · Accepted Answer

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

然后运行命令 -你的 IP 地址ng serve --host 10.202.32.45在哪里。10.202.32.45

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

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

score 5 · Accepted Answer

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

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

前任：

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

然后简单地做start或npm run start

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

score 3 · Accepted Answer

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

score 3 · Accepted Answer

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

打开浏览器到 <IP-ADDRESS>:4200
Usingng serve --host 0.0.0.0 --disable-host-check将允许您使用您的域而不是 localhost 连接到 ng 服务。

打开浏览器到 <DOMAIN-NAME>:4200

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

没有package.json必要改变。

对我来说，它使用：

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

主机：http://localhost:5999/

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

Use ng serve --host<Your IP> --port<Required if any>.
ng serve --host=192.111.1.11 --port=4545.
You can now see the below line at the end of compilation.

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

score -1 · Accepted Answer

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

score -1 · Accepted Answer

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

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

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

score -3 · Accepted Answer

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

你可以加

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

到 package.json

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

19 回答 19

Related

Reference