我在 ASP.NET Core Web API 应用上配置了 CORS 时遇到 CORS 错误

Question

我有一个 ASP.NET Core Web API 托管在 Azure 中。当我尝试从托管在 Vercell 上的 Web 应用程序发出提取请求时，出现此错误：

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.

这是我的 Startup.cs 文件：

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();
            });
        }
    }
}

知道为什么会这样吗？

我的网络应用程序框架是 Next.js。

这是我的 Azure 配置：

默认部署配置文件（WebApp 托管在具有 F1 层的 Windows 机器上）
我什至将 web.config 文件更改为始终发送必需的 headers

Answer 1

尝试使用这种语法

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(..
 
         }

确保 UseCors 应该在 Configure 方法的末尾但在 UseAuthorizaton 之前。 AddCors 应该位于配置服务的顶部。

Answer 2

看来后端的Framework有点问题（我不知道怎么描述）。当我重新启动我的电脑然后重建我的应用程序时，一切正常。

感谢大家的每一条评论

我在 ASP.NET Core Web API 应用上配置了 CORS 时遇到 CORS 错误

I'm getting CORS error with CORS configured on ASP.NET Core Web API app

c#

asp.net-core

asp.net-core-webapi

next.js