Angular client request to the back-end API cannot pass Access control check

Question

I have an angular 6 client that sends a request to a separate ASP.NET Core API, with the following configuration in the startup.cs file:

in ConfigureServices method:

services.AddCors(options =>
{
    options.AddPolicy(
        "MyPolicy",
        builder =>
        {
            builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials();
        });
});

in Configure method:

// called before UseMvc
app.UseCors("MyPolicy");

When testing locally, the call works fine. when deploying on a test machine, and accessing the angular client by it's ip and port, the request gives:

Failed to load http://xxxIPxx:xxxPortxxx/xxxURLxxx:  Response to
preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource.  Origin 'http://xxxIPxx:xxxPortxxx' is therefore not allowed
access. The response had HTTP status code 502.

(This is the error message displayed by Google Chrome)

What could I have missed?

Answer 1

You should include the Access-Control-Allow-Origin header when firing the request from your Angular application.

Quick example with axios: import axios from 'axios';

const Http = axios.create({
  baseURL: 'https://example.com/api',
  headers: { 'Access-Control-Allow-Origin': '*' }
});

export default Http;