Separate WebApi from Angular to two different projects - asp.net

Question

Now I use webApi and Angular apps such one project by default from VS. I want to separate it for two projects. I remove all from my StarUP file related with SPA. I run Angular part with command nmp run start and it run in 4200. I add ${environment.apiUrl}/api for my api request by this way
async loginUser(login: Login): Promise<any> {
return this.http.post(`${environment.apiUrl}/api/${environment.apiVersion}/userAuth/login`, login).toPromise();
And I see in the networking Request URL: https://localhost:44347/api/v1.0/userAuth/login
but I have cors error. My header look like this in network.
When I came back to one monolit project angular and webApi and ran it. In network my header look like this.
As you can see in first case I dont have fully header. How I can run my angular app separate from web api such a full single app? Thanks

Answer 1

If your are running as Asp.Net Core or 5+ application you have two ways of doing this:
1 - Enable CORS on your web api
This is ideal when you will serve your api and angular aplication from different servers in production.
In development your URLs will be:
Angular: https://localhost:4002 (you will use this one in your browser)
WebApi: https://localhost:44347
Statup.cs
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy("Any",
builder =>
{
builder
.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
});
options.AddPolicy("Production",
builder =>
{
builder.WithOrigins("https://your-angular-domain.com", "https://your-other-domain.com");
});
}
// Your other services
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseCors("Any"); // Allow any origin
}
else
{
app.UseCors("Production"); // Only allow specific origins
app.UseHsts();
app.UseHttpsRedirection();
}
// Your other middlewares....
}
2. Use Spa Middleware
This is ideal when you will serve your WebAPi and angular app from the same server in production.
In development your URLs will be:
Angular: https://localhost:4002
WebApi: https://localhost:44347 (you will use this one in your browser)
Statup.cs
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
// Your other middlewares....
app.UseSpa(spa =>
{
if (env.IsDevelopment()) // In production your angular app and web api will already be at the same server, or you should enable CORS
{
spa.UseProxyToSpaDevelopmentServer("http://localhost:4001");
}
});
}