为什么我对后端服务的前端调用被拒绝？

Question

我有一个在 IIS 服务器的端口 8001 上运行的 Angular 4 应用程序，它应该访问在同一台服务器上运行的两个后端 .NET API，一个在端口 89 上，另一个在端口 83 上。

此应用程序正在由两种用户访问：一些用户与应用程序服务器位于同一网络上，另一些用户通过有权访问该服务器的端口 8001 的虚拟 IP 进行访问，并且仅访问该端口.

前端使用 REST 调用 API，代码如下：

this.http.post<boolean>(`http://<ServerHostname>:89/api/Controller/VerifyLogin`, body);

在与同一网络上的用户进行测试时，呼叫通过并且一切正常。通过虚拟IP访问的用户进行测试时，他们能够访问前端应用程序，前端显示但对API的调用不起作用。这可能是因为请求是使用服务器主机名而不是“localhost”发出的，但我不确定。

我尝试将 API 调用更改为使用 localhost，如下所示：

this.http.post<boolean>(`http://localhost:89/api/Controller/VerifyLogin`, body);

但是当我在同一个网络上测试时，API请求没有完成。

这是出现在 Chrome 控制台上的错误消息： zone.js:2933 OPTIONS http://localhost:89/api/GravacaoDb/VerificarLogin net::ERR_CONNECTION_REFUSED

编辑： 这是 API 中我的 Web.config 文件中的 CORS 配置：

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
        <add name="Access-Control-Max-Age" value="86400" />
      </customHeaders>
    </httpProtocol>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
  </system.webServer>

我在做什么可能有什么问题？不允许请求的原因是什么？

Answer 1

您似乎没有考虑到 Angular 代码在用户的浏览器中运行，而不是在存储它的服务器上。因此，您进行的 API 调用来自用户的浏览器。如果该浏览器在您的本地网络之外，防火墙将阻止通过 8001 以外的任何其他端口进行访问（正如您在问题中所说的那样）。

所以，这不是 CORS 问题。

您需要配置网络防火墙，以允许具有虚拟 IP 的用户访问您服务器的端口 89，或者（如果不可能）创建一些代理服务来侦听端口 8001（或其他允许的端口）防火墙）并将请求转发到端口 89。

---

需要考虑的重要事项：

如果您以这种方式开放对 API 的访问，那么任何人都可以不加检查地调用这些 API。但这是一个普遍的问题。允许从客户端 JavaScript 代码访问 API 意味着任何人都可以调用这些 API。