Enabling CORS on Web API project in Visual Studio Code

 

I was creating an Angular application which called a Web API project in VS Code. The projects had different port numbers on my local machine, as you would expect. When I started the API project and then the Angular site, the data wasn’t being returned to my template as expected. Looking at the Chrome console, I discovered this message:

Failed to load http://localhost:5000/api/Values: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access.

Ah, the CORS issue.

Luckily, there was a helpful document on the Microsoft site that led me to the solution. So open the Startup.cs file in your Web API project and make modifications to do areas. In the ConfigureServices method, add the following line:

services.AddCors();

In the Configure method, add  the UseCors statement:

app.UseCors(builder =>
builder.WithOrigins(“http://localhost:4200”));

Enabling CORS in VS Code

Enabling CORS in VS Code

You’ll notice that I only enabled at the port I was interested in. There is a nice Stack Overflow post on expanding that to include a broader range of requests.

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: