Asp .Net Core 系列：集成 CORS跨域配置

关注

原创 2024-01-12 22:58:12 3.1k 阅读 AI 写同款· GEO 优化 ›

.NET----WebAPI配置和服务config.EnableCors() 如果.NET服务没有配置跨域请求，则会出现错误，不支持跨域一、安装Microsoft.Asp.Net.WebApi.Cors包二、在 WebApiConfig中添加配置文件 // Web API 配置和服务 config.EnableCors(); 三、在控制器中控制跨域请求 using System.Web.Http.Cors; //跨域命名空间 namespace WebA... 阅读详情

文章目录

什么是CORS?

CORS，全称是“跨源资源共享”（Cross-Origin Resource Sharing），是一种Web应用程序的安全机制，用于控制不同源的资源之间的交互。

在Web应用程序中，CORS定义了一种机制，通过该机制，浏览器能够限制哪些外部网页可以访问来自不同源的资源。源由协议、域名和端口组成。当一个网页请求另一个网页上的资源时，浏览器会检查请求是否符合CORS规范，以确定是否允许该请求。

CORS的工作原理是：当浏览器发送一个跨域请求时，它会附加一些额外的头部信息到请求中，这些头部信息包含了关于请求的来源和目的的信息。服务器可以检查这些头部信息并决定是否允许该请求。如果服务器允许请求，它会返回一个响应，其中包含一个名为“Access-Control-Allow-Origin”的头部信息，该信息指定了哪些源可以访问该资源。浏览器会检查返回的“Access-Control-Allow-Origin”头部信息，以确定是否允许该跨域请求。

通过使用CORS，开发人员可以控制哪些外部网页可以访问他们的资源，从而提高应用程序的安全性。

Asp .Net Core 中如何配置CORS?

在ASP.NET Core中，CORS（跨源资源共享）可以通过简单的配置来实现。CORS是一种机制，允许一个网页的许多资源（例如字体，JavaScript等）从不同的源获取。默认情况下，ASP.NET Core不允许跨源请求，为了使其能够允许跨域请求，你需要启用CORS。

以下是如何在ASP.NET Core中配置CORS的步骤：

首先，确保你的项目中已经安装了Microsoft.AspNetCore.Cors包。如果没有，你可以通过NuGet包管理器来安装它。打开终端或命令提示符，然后键入以下命令：
```
dotnet add package Microsoft.AspNetCore.Cors
```

在Startup.cs文件的ConfigureServices方法中配置CORS服务：

public void ConfigureServices(IServiceCollection services)  
{  
    // ... 其他服务配置  
 
    // 添加CORS服务  
    services.AddCors(options =>  
    {  
        // 允许所有源访问（请注意：在生产环境中应更具体地配置源）  
        options.AddPolicy("MyCorsPolicy", builder => builder.WithOrigins("http://example.com"));  
    });  
 
    // ... 其他服务配置  
}

这里我们添加了一个名为"MyCorsPolicy"的策略，它允许来自http://example.com的跨域请求。你可以根据需要添加更多的源地址或使用通配符*来允许所有源。

在Configure方法中启用CORS中间件：

ublic void Configure(IApplicationBuilder app, IWebHostEnvironment env)  
{  
    // ... 其他中间件配置  
 
    // 使用CORS中间件并应用之前定义的策略  
    app.UseCors("MyCorsPolicy");  
 
    // ... 其他中间件配置  
}

CorsPolicyBuilder类详解

https://learn.microsoft.com/zh-cn/dotnet/api/microsoft.aspnetcore.cors.infrastructure.corspolicybuilder?view=aspnetcore-8.0

方法
AllowAnyHeader()	允许所有请求头。等同于`WithHeaders("*")`
AllowAnyMethod()	允许所有HTTP方法的请求。等同于`WithMethods("*")`
AllowAnyOrigin()	允许来自任何源的请求。等同于`WithOrigins("*")`。但需要注意，如果使用了这个方法，可能会带来安全风险，因为它允许来自任何源的请求，包括潜在的恶意源。通常建议明确指定允许的源
AllowCredentials()	允许带有凭据（如cookies、HTTP认证等）的请求
Build()	使用添加的条目生成新的 CorsPolicy 。
DisallowCredentials()	将策略设置为不允许凭据。
SetIsOriginAllowed(Func<String,Boolean>)	设置为基础策略指定的 `isOriginAllowed` 。
SetIsOriginAllowedToAllowWildcardSubdomains()	将 IsOriginAllowed 策略的属性设置为一个函数，该函数允许源在评估是否允许源时匹配配置的通配符域。
SetPreflightMaxAge(TimeSpan)	设置基础策略的预检MaxAge。
WithExposedHeaders(String[])	将指定的 `exposedHeaders` 添加到策略。
WithHeaders(String[])	允许带有指定请求头的请求。可以传入一个或多个请求头名称
WithMethods(String[])	允许指定HTTP方法（如GET、POST等）的请求。可以传入一个或多个HTTP方法，可以传入一个`HttpMethods`枚举的实例
WithOrigins(String[])	允许来自指定源的请求。可以传入一个或多个源地址

WithOrigins(string origin): 允许来自指定源的请求。可以传入一个或多个源地址。

builder.WithOrigins("http://example.com");

WithOrigins(string[] origins): 允许来自指定源的请求。可以传入一个或多个源地址数组。

builder.WithOrigins("http://example.com", "http://www.example.com");

WithMethods(string method): 允许指定HTTP方法（如GET、POST等）的请求。可以传入一个或多个HTTP方法。

csharp复制代码

builder.WithMethods("GET", "POST");

WithMethods(HttpMethods methods): 允许指定HTTP方法（如GET、POST等）的请求。可以传入一个HttpMethods枚举的实例。

builder.WithMethods(HttpMethods.Get | HttpMethods.Post);

WithHeaders(string headerName): 允许带有指定请求头的请求。可以传入一个或多个请求头名称。

builder.WithHeaders("X-Custom-Header");

WithHeaders(IEnumerable<string> headerNames): 允许带有指定请求头的请求。可以传入一个或多个请求头名称的集合。

builder.WithHeaders(new string[] { "X-Custom-Header1", "X-Custom-Header2" });

WithAnyMethod(): 允许所有HTTP方法的请求。等同于WithMethods("*")。

WithAnyHeader(): 允许所有请求头。等同于WithHeaders("*")。

WithAnyOrigin(): 允许来自任何源的请求。等同于WithOrigins("*")。但需要注意，如果使用了这个方法，可能会带来安全风险，因为它允许来自任何源的请求，包括潜在的恶意源。通常建议明确指定允许的源。

WithCredentials(): 允许带有凭据（如cookies、HTTP认证等）的请求。这通常用于支持跨站点请求伪造（CSRF）保护。如果设置了此选项，客户端必须包含凭据来证明其身份，并且不允许使用预检请求来预先授权带有凭据的请求。

Build(): 构建CORS策略。在调用此方法后，可以通过将策略添加到CORS配置中来使用它。例如：options.AddPolicy(“MyCorsPolicy”, policy);

注册以及使用策略三种方式

在ConfigureService先注册策略(默认策略或命名策略)，然后可以在Configure管道中进行全局拦截或者以特性的形式作用于Controller或action。

直接在Configure中配置相应的策略进行全局拦截，不需要在ConfigureService中注册任何代码。

默认策略：AddDefaultPolicy

            //注册
            builder.Services.AddCors(options => {
                options.AddDefaultPolicy(policy =>
                {
                    policy.SetIsOriginAllowed(_ => true).AllowAnyMethod().AllowAnyHeader().AllowCredentials();
                });
            });

            // 使用
            app.UseCors();

命名策略：AddPolicy

            //注册
            builder.Services.AddCors(options => {
                options.AddPolicy("MCodeCors",policy =>
                {
                    policy.SetIsOriginAllowed(_ => true).AllowAnyMethod().AllowAnyHeader().AllowCredentials();
                });
            });

            // 使用
            app.UseCors("MCodeCors");

全局拦截

            app.UseCors(build =>
            {
                build.SetIsOriginAllowed(_ => true).AllowAnyHeader().AllowAnyMethod().AllowCredentials();
            });

EnableCors 和 DisableCors 特性

EnableCors和DisableCors特性是ASP.NET Core中的CORS（跨源资源共享）特性，它们主要用于配置CORS策略。

EnableCors特性允许你指定哪些源可以访问你的应用程序资源，以及允许哪些HTTP方法和请求头。它基于Controller与Action，可以在每个Controller或Action上使用。

DisableCors特性则用于禁用CORS功能。通过使用这个特性，你可以禁止跨域请求，以确保应用程序的安全性。

需要注意的是，这两个特性都只适用于ASP.NET Core中的控制器类，并且需要在控制器类中显式添加这些特性。例如：

[EnableCors("PolicyName")]  
public class MyController : Controller  
{  
    // 控制器方法...  
}

或者：

[DisableCors]  
public class MyController : Controller  
{  
    // 控制器方法...  
}

关于带证书与不带证书代码的实现

跨源（cross-origin）不带请求证书(Credentials)

js方法如下

      $("#btn1").click(function () {
            //alert(11);
            $.ajax({
                url: 'http://localhost:8000/Home/Get',
                type: 'Get',
                success: function (res) {
                    alert(res.name);
                }
            });
        })

这个*号是AllowAnyOrigin，设置返回的，返回是允许所有源的意思，如下代码

           #region 普通的跨域验证，不带请求中的证书

            app.UseCors(builder =>
            {
                builder.AllowAnyOrigin()
                       .AllowAnyHeader()
                       .AllowAnyMethod()
            });
            #endregion

跨源（cross-origin）带请求证书(Credentials)

  $("#btn2").click(function () {
            //alert(11);
            $.ajax({
                url: 'http://localhost:8000/Home/Get',
                type: 'Get',
                xhrFields: { withCredentials: true },
                crossDomain: true,
                success: function (res) {
                    alert(res.name);
                }
            });
        })

我们使用第二种请求方式，而这个时候如果我们开启了，却没有改后端配值，我们发起请求发现。回报如下跨域：

Access to XMLHttpRequest at 'http://localhost:8000/Home/Get' from origin 'http://localhost:5000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

这个是什么原因导致的呢？我们看看ajax请求，因为我们使用了 withCredentials: true，而恰恰这个使用是不允许AllowAnyOrigin()的，意思就是不允许返回的Access-Control-Allow-Origin:*，那我们的处理方式如下

我们看看的配置，如下代码，我们必须开启AllowCredentials，同时去掉AllowAnyOrigin，这两个

            #region 跨源（cross-origin）请求中的证书(Credentials) 不带自定义参数
            //当在ajax设置了withCredentials: true，就是要带域名的cookie，同时这里是不允许返回Access - Control - Allow - Origin: *这个带星号的，这个时候，我们就要设置允许的参数了

            app.UseCors(builder =>
            {
                builder.SetIsOriginAllowed(_ => true)
               .AllowCredentials();
            });

            #endregion

发现我们的请求head多了了Access-Control-Allow-Credentials:true和带了cookie

封装成扩展

    /// <summary>
    /// 跨域服务扩展
    /// </summary>
    public static class CorsServiceExtensions
    {
        private readonly static string PolicyName = "MCodeCors";

        /// <summary>
        /// 添加跨域
        /// </summary>
        /// <param name="services">服务集合</param>
        /// <returns></returns>
        public static IServiceCollection AddMCodeCors(this IServiceCollection services)
        {
            if (services == null) throw new ArgumentNullException(nameof(services));
            //origin microsoft.aspnetcore.cors      
            return services.AddCors(options =>
                {
                    options.AddPolicy(PolicyName, policy =>
                    {
                        policy.SetIsOriginAllowed(_ => true).AllowAnyMethod().AllowAnyHeader().AllowCredentials();
                    });
                });
        }
        /// <summary>
        /// 使用跨域
        /// </summary>
        /// <param name="app">应用程序建造者</param>
        /// <returns></returns>
        public static IApplicationBuilder UseMCodeCors(this IApplicationBuilder app)
        {
            return app.UseCors(PolicyName);
        }
    }