如何允许访问外部本地主机

如何允许在Angular2中访问本地主机之外的对象?我可以很容易地在localhost:3030/panel导航，但当我写我的IP，如10.123.14.12:3030/panel/时，我不能导航。

您能告诉我怎么修吗?我没有使用npm(节点项目管理-节点安装/节点启动)来安装和运行项目。

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

355794 次浏览
小开
最佳答案

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

编辑

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

编辑2

在cli的新版本中(我认为是v5或更高版本)，你可以再次使用0.0.0.0作为ip，为网络上的任何人托管它。

作为旁注

.请确保您的连接在您的操作系统设置中设置为Public
小开

对于使用节点项目管理器的人，这一行也添加到包中。Json就足够了。对于angular CLI用户来说，mast3rd3mon的答案是正确的。

你可以添加

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

对package.json

小开

Mac用户:

  1. 进入“系统首选项->网络-> Wi-Fi”
  2. 将IP地址复制到状态下面(通常是192.168.1.x)
  3. 将它粘贴到你的ng serve中，像这样:ng serve --host 192.168.1.x

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

小开

运行命令

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

这将禁用主机检查，并允许从外部(而不是localhost)访问IP地址

小开

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

小开

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

...


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

你也可以使用ngrok自检隧道上运行的所有HTTP流量 ，那么你可以使用ngrok http --host-header=rewrite 4200

来公开
小开

您可以使用以下命令访问您的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
小开

因为问题是防火墙。如果您在Windows上，请确保允许节点通过 enter image description here < / p >

小开

一个可能会帮助到某人的快速解决方案:

添加这一行作为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访问您的项目。

小开

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

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

警告:这是一个用于测试或调试Angular应用程序的简单服务器 本地。

.

.

将此服务器绑定到打开的连接可能导致损害您的应用程序或 电脑。使用不同于传递给"——host"标志的主机可能会导致 Websocket连接问题。你可能需要使用"——disableHostCheck"如果那是 例子。< / p >

小开

没有package.json是必须改变的。

对我来说，它的工作原理是:

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

主持人:http://localhost: 5999 /

小开
  • < p > ng serve --host<Your IP> --port<Required if any>使用。

  • ng serve——host=192.111.1.11——port=4545。

  • 你现在可以在编译结束时看到下面这行。

Angular Live Development Server正在监听192.111.1.11:4545，打开浏览器http://192.111.1.11:4545/ **。

小开

如果你在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"]
小开

在Angular版本11(也许还有一些更早的版本)中，--public-host选项对我来说很有用，例如:

$ ng serve --host 0.0.0.0 --public-host app.mypublicdomain.com
小开 
ng serve --open --host 0.0.0.0 --disable-host-check

这对我来说非常有效(甚至使用一个a主机指向该IP的公共IP)。

小开

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

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

小开

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

    打开浏览器到<IP-ADDRESS>:4200

  2. 使用ng serve --host 0.0.0.0 --disable-host-check将允许您使用您的域而不是localhost连接到ng服务。

    打开浏览器到<域名>:4200


提交答案