Run Angular and ASP.NET Web API on the same port

Question

I am currently using angular to issue API call to an API server running ASP.NET. However, I have a cross-origin issue as for angular development, I am using localhost. While in the production version they will all run under the same domain using IIS.

Is there a way to run the angular app on the same port with ASP.NET?

P.S.: I am also open for other alternatives on solving this issue.

Answer 1

I've encountered the same problem, then I've found this post on medium, hope this works for you.

Edit: Actually the solution that I've used is from that article.

The idea is that you can't "publish" the API and the Angular app on the same port, but you can use a proxy to connect from the Angular app to the API on the other port.

Update: sorry for not answering this long time ago.

To deal with the cors issue (in this case) you can use a proxy with the ng serve command.

For example, in my case I have used a proxy.conf.json file like this:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {"^/api" : ""}
  }
}

This code rewrite the url on every request to /api/* to the http://localhost:3000 where your api is listening.

So, to illustrate, if in angular you make a request like http://localhost:4200/api/users it will be redirected/rewrited to http://localhost:3000/api/users solving the cors issue.

Now, the way you have to run your angular application is different.

ng serve --proxy-config proxy.conf.json

Answer 2

I was able to achieve that with IIS successfully! I know the post is old but hopefully, it will save time for solution seekers :)

First (just a reminder) ensure that you have .NET Core Hosting Bundle installed on IIS machine (link could be found here). Bear in mind that it will require at least WinSrvr2012R2 to run. Now copy published .net core API solution folder to the server. The same for Angular - next reminder here: execute ng build --prod then copy dist folder to the server. Then configure IIS - create a new web site that points to the Angular app folder. Your Angular app should run at this point (but obviously there is no API yet).

Go to application pools - you will see the pool created for your application. Open basic settings and change CLR version to 'No managed code'.

And finally, click on your Web Site and 'Add application' under it. Point to dotnet core API folder and name it using some short alias. Now you should have a website structure with the application included.

If your angular app URL is:

https://myiissrvr/

your API is under:

https://myiissrvr/[ALIAS]/

DONE

Final remarks:

Usually, web API using URL structure like

https://myiissrvr/api/[controller]/[action]

So after bundling it together, it will look like:

https://myiissrvr/[ALIAS]/api/[controller]/[action]

With that approach, you should be able to attach multiple web API services under statically served Angular website - each one under its own alias. Potentially it might be useful in many scenarios.