How to setup angular 7 to communicate with net core web api in VS 2017

Question

I've searched high and low for a good response. The problem I'm trying to solve is this...I have a VS 2017 (Community) project that has an Angular 7 app with a net core web api backend all in the same project. I can successfully test the API using Postman to post and get some simple data to/fro a database. However, when I try to use the Angular front end to do the same I get a ERRCONNREFUSED error.

After several conflicting/frustrating web searches to find a straightforward answer, I landed on trying a proxy.config.json file.

proxy.config.json

{
  "/api": {
    "target": "http://localhost:8888",
    "secure": false
  }
}

I launch the Angular app via npm start and it launches in port 4200 as expected.

I launch dotnet run and it also runs successfully.

Startup.cs

     app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action=Index}/{id?}");
        });

        app.UseSpa(spa =>
        {

            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseAngularCliServer(npmScript: "start");
            }
        });

package.json

{  
"name": "client-app",
 "version": "0.0.0",
 "scripts": {
 "ng": "ng",
 "start": "ng serve --proxy-config proxy.config.json",
...}

The error I get is the following:

Error occurred while trying to proxy request /api/clients from localhost:4200 to localhost:8888 (ERRCONNREFUSED).

I feel like there is something simple I'm just overlooking.

Answer 1

Proxy.config.json (never seen it) feels like it is intended to have your back end nodejs server send requests on to another web server so it should specify the other server. You appear to have declared that this service runs on 8888 on your localhost but clearly it isn't..

Web browser scripting security models generally revolve around the client page scripting only being able to communicate with the server that the page came from. As such if you have an api at http://myapi.myhost.com (in production) and you have your angular app being set up on your local machine, then the page came from the local machine, can only communicate with the server on the local machine, so the server at localhost:4200 (probably nodejs) has to proxy requests into myapi.myhost.com on the page's behalf.

As an alternative (better) option you can configure thing so the api (different host/port) is reachable from your front end app, even though the server hosting the api didn't serve up your app

You say you have a working request in postman, presumably the target of that request is the web server running the api, so configure the proxy so that that is the target, not localhost:8888 (it will really help our debugging if you post the working postman requests, even a screenshot of the url postman is hitting would help)

If the api truly is running on 8888 and you want to solve this via proxy rather than CORS we have a bit more work to do to find out why it isn't connecting

Answer 2

Thank you all for your quick response. I found it helpful to have others asking me questions. Specifically, the one from IP Kaal regarding the CORS setup. In trying to respond, I found that I had not registered CORS in the Startup ConfigureServices method. Once I did that, the api worked with the Angular front end as expected. Thank you all again.