简体   繁体   中英

CORS stopping communication between Angular app and .NET CORE 3.0 API

I tried to avoid posting this question as there are so many others like, but after trying what seems like every combination none have solved my issue.

The Problem

My angular application CAN POST to my web API when it's running locally on IIS EXPRESS. But when the API is deployed to IIS my Angular app CANNOT POST to it. However it can successfully perform a GET request in both environments.

The Error

Access to XMLHttpRequest at 'https://mySite:1234/api/v1/postData' from origin 'https://mySite:1233' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What I've tried/the code

Both applications run on different ports so I understand why I need to configure CORS and after quite a bit of reading I found that a pre-flight request is not made for GET requests ( as covered in the Mozilla Docs ), so that would explain why the GET request succeeds. The Mozilla docs lead me to believe that my POST does not come under the simple request category as it require authorisation, but that does not answer way it works on IIS EXPRESS and not on IIS (I assume express is a bit less strict?).

After following the official docs and NOT being able to get it to work then looking at various SO posts and trying various options, I've come to a dead-end and really hope someone can point out where I've gone wrong

Startup.cs

public class Startup
{
    private const string ALLOWED_ORIGINS = "allowedOrigin";
    ...other stuff...
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy(name: ALLOWED_ORIGINS,
                builder =>
                {
                    builder.WithOrigins("https://myLocalSite:1233", "https://myDeployedSite:1233")//these values are retrieve from config 
                        .AllowAnyMethod()
                        .AllowAnyHeader();
                });
        });

        services.AddControllers()

        ....other stuff... 

        services.AddMvc(o =>
        {
            var policy = new AuthorizationPolicyBuilder()
                .RequireAuthenticatedUser()
                .Build();
            o.Filters.Add(new AuthorizeFilter(policy));
        });

        ....other stuff... 
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        ...other stuff...

        app.UseRouting();

        app.UseCors(ALLOWED_ORIGINS);

        app.UseAuthentication();

        app.UseAuthorization();

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

The controller

[ApiController]
[ApiVersion("1.0")]
[Route("api/v{version:apiVersion}/[controller]")]
public class PostDataController : ControllerBase
{
    ...other stuff...

    [HttpPost]
    public async Task<SomeResponse> Post(SomeRequest sr)
    {
        ...other stuff...
    }
}

Finally

I have not added any angular code as I believe that the issue is in my API set up. I will be happy to add the code if needed though

  1. Try putting AddMvc BEFORE "AddCors".

  2. Sanity checks: start with AllowAnyOrigin, and work your ways to more granular definition

    public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddCors(); } public void Configure(IApplicationBuilder app) { app.UseCors(policy => policy.WithOrigins(ALLOWED_ORIGINS)); }

Looks like you have those (above).

Do you have (below)?

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {

        services.Configure<CorsOptions>(options =>
        {
            options.AddPolicy(
                "AllowAnySimpleRequest",
                builder =>
                {
                    builder.AllowAnyOrigin()
                           .WithMethods("GET", "POST", "HEAD");
                });

Check out this file for a better "full context" code. https://csharp.hotexamples.com/site/file?hash=0x8b07b2262d54348025f4b69ad1c3a6e517321a0d14cca0e0bf05aed12f88424f&fullName=Startup.cs&project=psilon2000/LUV

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM