Why is my front-end call to my back-end service being refused?

Question

I have an Angular 4 application running on the port 8001 of an IIS server, that should access two back-end .NET APIs running on the same server, one on the port 89 and another on the port 83.

This application is being accessed by two kinds of users: some that are on the same network as the application server and some that are accessing through a virtual IP that has permission to acess the port 8001 of that server, and just that port.

The front-end calls the APIs using REST, with code like this:

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

When testing with users on the same network, the call pass and everything works as expected. When testing with users accessing through the virtual IP, they are able to get to the front-end application, the front-end shows up but the calls to the API do not work. It might be because the request is being made using the server hostname instead of 'localhost' but I am not sure about that.

I tried to change the call to the API to use localhost, like this:

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

but when I test it on the same network, the API request does not complete.

This is the error message that appear on the Chrome console: zone.js:2933 OPTIONS http://localhost:89/api/GravacaoDb/VerificarLogin net::ERR_CONNECTION_REFUSED

EDIT : Here is the CORS configuration inside my Web.config file in the API:

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

What can be the problem with what am I doing? What can be the reason the request is not allowed?

Answer 1

You seem to not consider that the Angular code runs in the browser of the user, not on the server where it is stored. So, the API calls that you make come from the user's browser. If that browser is outside your local network, firewalls will block access via any other port than 8001 (as you say yourself in the question).

So, this is not a CORS problem.

You need to configure the network firewall such that users with the virtual IP are allowed to access port 89 of your server or (if that is not possible) create some proxy service that listens on port 8001 (or some other port allowed in the firewall) and forwards requests to port 89.

---

One important thing to consider:

If you open access to your APIs this way, then anyone can call these APIs unchecked. But this is a general problem. Allowing API access from client-side JavaScript code means that anyone call call these APIs.