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

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

能否请允许我解决该问题？我没有使用npm（节点项目管理-节点安装/节点启动）来安装和运行项目。

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

使用ng serve --host 0.0.0.0可以让您ng serve使用ip代替ip连接到localhost。

编辑

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

编辑2

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

Mac用户：

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

然后，您必须能够通过看到其他设备上的页面192.168.1.x:4200。

运行命令

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

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

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

我只是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

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

一个可以帮助某人的快速解决方案：

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

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

如果您在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"]

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

无需package.json进行更改。

对我来说，它可以使用：

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

主机：http：// localhost：5999 /

• 使用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/**上打开浏览器。

对于正在使用节点项目管理器的人员，添加到package.json的这一行也足够了。对于有角度的CLI用户，mast3rd3mon的答案为true。

你可以加

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

到package.json