2

I have an ASP.NET Core Web API hosted in Azure. When I'm trying to make a fetch request from my web app hosted on Vercell, I'm getting this error:

Access to fetch at {myapi enpoint} from origin 'https://{myapp}.vercel.app' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This is my Startup.cs file:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Cors;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using Microsoft.OpenApi.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using Pomelo.EntityFrameworkCore.MySql;
using System.Threading.Tasks;
using ctsapi.Services;
using Jose;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.IdentityModel.Tokens;
using System.Text;
using ctsapi.Models;
using Newtonsoft.Json.Linq;
using Microsoft.AspNetCore.Http;
using System.Net;
 
namespace ctsapi
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }
 
        public IConfiguration Configuration { get; }
 
        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(options =>
            {
                options.AddPolicy("AllowAllOrigins", builder =>
                {
                    builder.AllowAnyOrigin();
                    builder.AllowAnyMethod();
                    builder.AllowAnyHeader();
                });
            });
            services.AddControllers();
            services.AddSwaggerGen(c =>
            {
                c.SwaggerDoc("v1", new OpenApiInfo { Title = "ctsapi", Version = "v1" });
                //c.IncludeXmlComments(XmlCommentsPath.XmlCommentsFilePath);
            });
 
            var jwtSection = Configuration.GetSection("JWTSettings");
            services.Configure<JWTSettings>(jwtSection);
 
            //to validate the token which has been sent by clients
            var appSettings = jwtSection.Get<JWTSettings>();
            var key = Encoding.ASCII.GetBytes(appSettings.SecretKey);
 
            services.AddAuthentication(x =>
            {
                x.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
                x.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
            })
                .AddJwtBearer(x =>
                {
                    x.RequireHttpsMetadata = true;
                    x.SaveToken = true;
                    x.TokenValidationParameters = new Microsoft.IdentityModel.Tokens.TokenValidationParameters
                    {
                        ValidateIssuerSigningKey = true,
                        IssuerSigningKey = new SymmetricSecurityKey(key),
                        ValidateIssuer = false,
                        ValidateAudience = false
                    };
                });
 
            services.AddAuthorization(options =>
            {
                options.AddPolicy(Policies.Admin, Policies.AdminPolicy());
                options.AddPolicy(Policies.ShopKeeper, Policies.ShopKeeperPolicy());
                options.AddPolicy(Policies.User, Policies.UserPolicy());
            });
        }
 
        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseDefaultFiles();
            app.UseStaticFiles(); // dodanie wwwroot
            //if (env.IsDevelopment())
            //{
                app.UseDeveloperExceptionPage();
                app.UseSwagger();
                app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "ctsapi v1"));
            //}
 
            app.UseHttpsRedirection();
 
            app.UseRouting();
 
            app.Use(async (context, next) =>
            {
                await next();
 
                if (context.Response.StatusCode == (int)HttpStatusCode.Unauthorized)
                {
                    // "Token Validation Has Failed. Request Access Denied"
                    context.Response.ContentType = "application/json";
                    await context.Response.WriteAsync(new ErrorDto()
                    {
                        StatusCode = 401,
                        Message = "Token Validation Has Failed. Request Access Denied"
                    }.ToString());
                }
            });
 
            app.UseCors("AllowAllOrigins");
 
            app.UseAuthorization();
 
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }
    }
}

Any idea why this is happening?

My web app framework is Next.js.

This is my Azure configuration:

  • Default deploy profile (WebApp hosted on Windows machine with F1 tier)
  • I even changed the web.config file to always send required headers
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Pan Michal
  • 177
  • 1
  • 3
  • 15
  • *Also Postman requests works well* - postman doesn't care about CORS – Caius Jard Nov 06 '21 at 21:09
  • It's just information that supposed to tell that endpoints are alright or smth – Pan Michal Nov 06 '21 at 21:12
  • Configure CORS in azure management portal instead of your code – Caius Jard Nov 06 '21 at 21:13
  • I even forced it with web.config file but next.js app don't see it – Pan Michal Nov 06 '21 at 21:14
  • Take a look at this answer.... it explains some things about the pre-flight request. https://stackoverflow.com/questions/69197165/how-to-resolve-cors-error-in-react-with-asp-net-core/69197425#69197425 – Jonathan Alfaro Nov 06 '21 at 21:15
  • @JonathanAlfaro but this headers are already present but my webapp don't recognise it – Pan Michal Nov 06 '21 at 21:18
  • when you say web app you mean the browser or the backend? CORS headers are a backend thing.... also you have your token validation before your CORS this means that if the token validation fails the front end will get a CORS error. anything middleware that shortcircuits the response chain will return a response with no CORS headers which in turn will cause the browser to cry about it – Jonathan Alfaro Nov 07 '21 at 04:41

2 Answers2

1

Try to use this syntax

public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(o => o.AddPolicy("AllowAnyOrigin",
                      builder =>
                       {
                       builder.AllowAnyOrigin()
                              .AllowAnyMethod()
                              .AllowAnyHeader();
              }));

        .....
            
        }

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

           // app.UseRouting();

            app.UseCors("AllowAnyOrigin");

         //  app.UseAuthorization();
         // app.UseEndpoints(..
 
         }

Make sure that UseCors should be in the end of Configure method but before UseAuthorizaton. AddCors should be at the top of Configure services.

Serge
  • 40,935
  • 4
  • 18
  • 45
  • I'll try with this services configuration, also app.UseCors("AllowAnyOrigin") was already in right place – Pan Michal Nov 06 '21 at 21:02
  • still this same error – Pan Michal Nov 06 '21 at 21:03
  • @PanMichal If you really need some help , post all your configure method of startup code. There are some more rules – Serge Nov 06 '21 at 21:37
  • Whole Startup.cs posted – Pan Michal Nov 06 '21 at 21:41
  • @PanMichal Thanks , everything seems OK but Cors is very tricky. I never seen anybody using app.Use with Cors, so you can try swap it with Cors, but I am not sure that it will work. – Serge Nov 06 '21 at 21:46
  • I have plan: I will clone my most stable master branch ten i will copy-paste files from unstable one until this error cause "Everything worked fine before" rule – Pan Michal Nov 06 '21 at 21:49
  • @PanMichal It just depends on how lucky you are. If not, nothing will save you. – Serge Nov 06 '21 at 21:54
  • @PanMichal builder.AllowAnyOrigin(); builder.AllowAnyMethod(); builder.AllowAnyHeader(); " ; " is 3 times. Is this just typo? – Serge Nov 06 '21 at 21:57
  • This answer addresses the question. However it is not advised to use <.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()> in production. Just a heads up :) – Serhat Jul 28 '22 at 09:34
1

So it looks like the Framework on Backend side just have some problems (I don't know how to describe it). When I restarted my PC and then rebuild my App, everything works fine.

Thanks everyone for every comment

Pan Michal
  • 177
  • 1
  • 3
  • 15