CORS error - Angular frontend and ASP.NET Core Web API

I have an Angular application that has been working fine for several years, working with an ASP.NET Core Web API hosted on AWS EC2 using docker with two separate containers for each item.

I am now getting CORS errors when I call the API. Following advice from the internet I added a CORS proxy into Angular.

Angular Version: 13.2.2
.NET Core Version: .NET 7.0
.NET Core Language Version: C# 11.0


angular.json:

"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "*<app:build>*",
"proxyConfig": "proxy.config.json"
},


proxy.config.json:

{
"/api": {
"target": "*<api URL>*",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}


I already have a CORS policy in my ASP.NET Core Web API:

services.AddCors(options =>
{
options.AddPolicy(name: "CorsPolicyName",
builder =>
{
builder
.WithOrigins("*<URLS>*")
.AllowAnyMethod()
.AllowAnyHeader();
});
});


Then the final part of the startup.cs is

app.UseHttpsRedirection();

app.UseRouting();

app.UseCors("CorsPolicyName");

app.UseAuthentication();
app.UseAuthorization();

app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});


I am not an expert in Docker or nginx, so I am not sure if there has been some updates that mean it won't work now.

Angular Docker file:

# Stage 1: Compile and Build angular codebase
# Use official node image as the base image
FROM node:latest AS build
# Set the working directory
WORKDIR /usr/local/app
# Add the source code to app
COPY ./ /usr/local/app/
# Install all the dependencies
RUN npm install
# Generate the build of the application
RUN npm run build
# Stage 2: Serve app with nginx server
# Use official nginx image as the base image
FROM nginx:latest
# Copy the build output to replace the default nginx contents.
COPY --from=build /usr/local/app/dist/*<Build>* /usr/share/nginx/html
# Expose port 80
EXPOSE 80


ASP.NET Core Web API Docker file:

FROM mcr.microsoft.com/dotnet/aspnet:7.0 AS base
WORKDIR /app
EXPOSE 80
#EXPOSE 443

#Add these two lines for fonts-liberation instead
RUN apt-get update; apt-get install -y fontconfig fonts-liberation
RUN fc-cache -f -v

FROM mcr.microsoft.com/dotnet/sdk:7.0 AS build
WORKDIR /src
COPY ["*<CSPROJ>*", "*<PROJ>*.API/"]
RUN dotnet restore "*<.csproj>*"
COPY . .
WORKDIR "/src/*<PROJ>*.API"
RUN dotnet build "*<PROJ>*.API.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "*<PROJ>*.API.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "*<PROJ>*.API.dll"]


Then to run the two docker containers these are the docker run commands

Angular:

docker run -d -p 81:80 --name angularcontainer *<IMAGE>*


ASP.NET Core Web API:

docker run -d -p 80:80 --name apicontainer *<IMAGE>*


Thanks in advance for any assistance that you can provide.

I've added a CORS Proxy to my Angular configuration that wasn't in there previously, and tried to add nginx config but without success.

Continue reading...