如何在AngularJS中允许localhost外部访问？

在开发 AngularJS 应用程序时，您可能需要将应用程序部署到远程服务器上进行测试或演示。但是，默认情况下，AngularJS 只允许从本地主机访问它的应用程序。因此，如果您希望从外部主机访问应用程序，则需要进行一些额外的配置。

启用远程访问

要启用远程访问，您需要在启动应用程序时以以下方式启动 AngularJS 开发服务器：

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

在这里，我们使用 -- host 参数将服务器绑定到 0.0.0.0 IP 地址，以便它可以通过任何网络接口进行访问。我们还使用 -- disable-host-check 参数，以便服务器可以绕过本地主机检查，从而允许远程主机访问应用程序。

更新 CORS 设置

默认情况下，AngularJS 中的 CORS 设置只允许从本地主机访问应用程序。要允许来自其他主机的访问，请更新 $httpProvider 来添加所需的 CORS 标头：

app.config(['$httpProvider', function($httpProvider) {
  $httpProvider.defaults.useXDomain = true;
  delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

在这里，我们使用 $httpProvider.defaults.useXDomain 标志启用 CORS，并使用 delete 命令删除默认的 X-Requested-With 标头，以允许从其他主机访问应用程序。

允许访问特定端口

如果您的应用程序在非标准端口上运行（例如 8080），则需要通过更新应用程序的端口设置来允许远程访问：

app.constant('API_URL', 'http://your_server_name_or_IP:8080');

在这里，我们使用 app.constant() 方法设置一个名为 API_URL 的常量，它包含应用程序的完整 URL（包括端口）。

结论

现在，您已经知道如何在 AngularJS 应用程序中启用远程访问。通过更新开发服务器配置，更新 CORS 设置和允许访问特定端口，您可以轻松地从外部主机访问您的应用程序并进行测试、演示或实际应用。