|
主题设置

卡片式面板通常用于非白色背景色的主体内

跨域解决

跨域请求(Cross-Origin Resource Sharing, CORS)是指浏览器允许从一个域名的网页向另一个域名请求资源的一种机制。出于安全考虑,浏览器默认会阻止跨域请求,但在 Web API 开发中,经常需要解决跨域问题,以便前端应用(可能在不同的域名上运行)能够访问后端的 API。

设置跨域

在 Program.cs 中引用跨域策略。Program.cs 下载

// 添加跨域策略
builder.Services.AddCors(options =>
{
	// 允许所有源、所有头、所有方法跨域
    options.AddPolicy("CorsPolicy",opt => opt.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
});

在 Program.cs 中使用跨域策略

// 使用跨域策略
app.UseCors("CorsPolicy"); // CorsPolicy 为跨域设置中指定的名称
发生跨域拦截时,请求是经过了后端的!!!只是后端返回的数据,被浏览器拦截了,不给客户端。

跨域封装

在 Extensions 文件夹中,创建 CrossPolicyExtension 类,对跨域策略进行封装。

namespace TBMS.Extensions
{
    public static class CrossPolicyExtension
    {
        public static void ConfigureCors(this IServiceCollection service)
        {
            // 添加跨域策略
            service.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy", 
                    builder => builder.AllowAnyOrigin()  // 任何源都允许跨域
                    .AllowAnyHeader()  // 任何请求头都允许跨域
                    .AllowAnyMethod());  // 任何方法都允许跨域
            });
        }
    }
}

在 Program.cs 启动类中引用跨域设置的封装方法

// 引入跨域设置的封装方法
builder.Services.ConfigureCors();

在 Program.cs 中使用跨域策略

// 使用跨域策略
app.UseCors("CorsPolicy"); // CorsPolicy 为跨域设置中指定的名称

小贴士

  • 经过实测,当项目中引入了定时任务 QuartzUI 后,如果在 Program.cs 中 将 QuartzUI 的引用和使用放在了跨域设置的前面,会导致跨域设置无效。需要将 QuartzUI 的引用和使用,放到跨域设置的后面。
  • 实际上,不管有没有引入 QuartzUI,都必须尽量将跨域设置靠前,比如放在 Swagger 或其他设置之前。