CORS 策略已阻止从源“http://localhost:4200”访问“http://localhost:25776/api/Upload”处的 XMLHttpRequest

Question

I am running angular spa application at http://localhost:4200 and .net core 3 application at http://localhost:25667 .

When my angular SPA keeps getting following error message.

Access to XMLHttpRequest at 'http://localhost:25776/api/Upload' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Even though I think my CORS are configured correctly.

Here is my startup.cs file.

public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(options =>
            {
                options.AddPolicy(
                    name: "CorsPolicy",
                     builder => builder.WithOrigins("http://localhost:4200/")
                    .AllowAnyHeader()
                    .AllowAnyMethod()
                    .AllowCredentials()
                    .SetIsOriginAllowed((host) => true));
            });

            services.AddHttpContextAccessor();

            services.AddControllers().AddNewtonsoftJson();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseHttpsRedirection();

            app.UseRouting();

            app.UseCors("CorsPolicy");

 

            app.UseAuthorization();


            app.UseDefaultFiles();
            app.UseStaticFiles(new StaticFileOptions()
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"Upload")),
                RequestPath = new PathString("/Upload")
            });

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapFallbackToController("Index", "Fallback");
            });
        }

and here is my controller file

using System.Collections.Generic;
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using TestApp.API.Models;
using TestApp.API.Services;
namespace TestApp.API.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    [EnableCors("CorsPolicy")]
    public class UploadController : ControllerBase
    {
        // GET api/value
        [HttpGet]
        public IEnumerable<Upload> GetTempUploadData()
        {
            UploadServices uploadServices = new UploadServices();
            return uploadServices.GetTempUploadData();

        }
    }
}

I also have Microsoft.AspNetCore.Cors nuget package installed.

Any help would be highly appreciated.

Thank you in advance.

Answer 1

You need to remvoe this / in WithOrigins .

services.AddCors(options =>
        {
            options.AddPolicy(
                name: "CorsPolicy",
                 builder => builder.WithOrigins("http://localhost:4200")
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowCredentials()
                .SetIsOriginAllowed((host) => true));
        });

Answer 2

I am posting my solution, in case someone run into similar issue.

Issue was with launchSetting.json file within my API. I set anonymousAuthentication to true and it solved the issue. It had nothing to do with CORS setting.

  "iisSettings": {
    "windowsAuthentication": true,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:25776/",
      "sslPort": 0
    }