前后端分离时,通过swagger访问接口是正常的,但是前端访问报Access to XMLHttpRequest at 'http://localhost:9100/api/Account/Login' from origin 'http://localhost:9091' 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. 这是因为后端API 没有配置跨域。

.net 6 跨域配置

ConfigureServices 中的配置

private static void ConfigureServices(IServiceCollection services, IConfiguration configuration)
        {
        	//....
            #region 配置跨域
            var allowedOrigin = configuration["AllowedOrigin"] ?? "*";// 从配置文件中读取请求来源
            services.AddCors(options =>
            {
                options.AddDefaultPolicy(
                    builder => { builder.WithOrigins(allowedOrigin).AllowAnyHeader().AllowAnyMethod(); });
            }); 
            #endregion
            //....
        }

我们使用 AddCors 方法配置 CORS 服务,并使用 AddDefaultPolicy方法添加默认的 CORS 策略。在策略中,我们使用WithOrigins允许指定的域名/IP的请求,使用 * 表是任意来源;使用AllowAnyMethod允许任意 HTTP 方法(get、post、put等),也可WithMethods配置只允许某些请求方法,使用 AllowAnyHeader允许任意请求头,也可以通过WithHeaders 方法配置必须包含哪些请求头。

config里面配置

我们使用 UseCors 方法将 CORS 中间件添加到请求处理管道中。

private static WebApplication Configure(WebApplication app, IConfiguration configuration)
        {
        	// ...
            app.UseCors();//  CORS 中间件添加到请求处理管道中。
            // ...
            return app;
        }

demo

public class Program
    {

        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);
            ConfigureServices(builder.Services, builder.Configuration);
            Configure(builder.Build(), builder.Configuration).Run();
        }

        private static void ConfigureServices(IServiceCollection services, IConfiguration configuration)
        {
            services.AddControllers();
            // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
            services.AddEndpointsApiExplorer();
            services.AddSwaggerGen();

            #region 配置跨域
            var allowedOrigin = configuration["AllowedOrigin"] ?? "*";// 从配置文件中读取请求来源
            services.AddCors(options =>
            {
                options.AddDefaultPolicy(
                    builder => { builder.WithOrigins(allowedOrigin).AllowAnyHeader().AllowAnyMethod(); });
            }); 
            #endregion
        }

        private static WebApplication Configure(WebApplication app, IConfiguration configuration)
        {
            app.UseCors();//  CORS 中间件添加到请求处理管道中。
            // Configure the HTTP request pipeline.
            if (app.Environment.IsDevelopment())
            {
                app.UseSwagger();
                app.UseSwaggerUI();
            }

            app.UseHttpsRedirection();

            app.UseAuthorization();


            app.MapControllers();

            app.Run();
            return app;
        }
    }

更多推荐