连接到 VPN 后，Angular 7 站点“无法访问”答案

【问题标题】：Angular 7 site "can't be reached" after connecting to VPN连接到 VPN 后，Angular 7 站点“无法访问”
【发布时间】：2019-12-16 11:58:28
【问题描述】：

在我的工作中，我们需要使用 Pulse VPN 连接到内部网站。当我连接时，它会破坏我的角度站点。

我注意到它也会破坏所有外部网站，但可以通过关闭 Internet Options > Connections > LAN Settings > Use a proxy server for your LAN 来解决。每次 VPN 连接时都会打开此设置。关闭它允许内部和外部网站连接，但有些方法会阻止我的 localhost:4200 角度网站。

当我尝试连接时，我会看到 Chrome 的 This site can't be reached (localhost took too long to respond) 页面，其中包含对 Check the proxy and firewall 的建议。 Windows 网络诊断说：The remote device or resource won't accept the connection

我尝试过的其他事情：

通过ng serve -o --host 0.0.0.0运行
硬刷新、清除缓存、清空 localhost 应用程序数据
使用任务管理器硬退出 Chrome 并重新启动应用程序
在cmd中运行ipconfig，获取IPv4地址。转到 $IPv4Address:4200。这行得通！客户端角度站点加载。但请求收到错误：Access to XMLHttpRequest at 'http://localhost/API_ROUTE' from origin 'http://LOCAL_IP:4200' has been blocked by CORS policy。如果我直接在浏览器中访问 localhost API 路由，它会正常加载。

【问题讨论】：

您能否尝试使用 ng serve -o --host 0.0.0.0 为应用程序提供服务，看看它是否有效？
您是否尝试从同一台机器访问它？请澄清情景
你用的是什么api？
您在告诉 Angular 如何连接到 API 的地方，对吧？试着告诉它去http://$IPv4Address/API_ROUTE。这听起来更像是一个网络问题，而不是一个开发问题......
大多数 VPN 无法在 vpn 隧道中正确路由 localhost（如果有的话），因为“localhost”实际上意味着来自 vpn 之间的冲突。特别是在一个 vpn 上有多个用户时，localhost 在那种情况下是什么意思？你的机器？其他用户？ VPN本身？它正在运行的服务器？

标签： angular proxy windows-10 vpn lan

【解决方案1】：

在 cmets 中，@Josh 说 localhost 路由可能会被 VPN 搞砸。对我来说，我的 Angular 站点不在 localhost:4200 上工作，但我的 API 在 localhost:80。

为了解决这个问题，我找到了我机器的 IP 并直接访问了它。在 Windows 上，在 cmd 终端中运行 ipconfig，然后将 IPv4 Address 复制到浏览器中：$IPv4Address:4200。 Angular 网站加载！

很遗憾，我的本地服务器的 CORS 设置未配置为接受来自此主机字符串的连接。我正在使用 C# 并将 WebApiConfig.cs 文件编辑为如下所示：

  var origins = LOAD_ORIGINS_STRING();
  origins += ",http://$IPv4Address:4200";
  var cors = new EnableCorsAttribute(origins, "*", "*");

然后我重新启动了我的 (IIS) 服务器以应用新设置。确保新源中的端口号后面没有/ 或其他文本。然后它起作用了！它可能无法解决根本问题，但对我来说这是一个可靠的解决方法。

【讨论】：