首页 > 代码库 > ASP.NET Core CORS 简单使用

ASP.NET Core CORS 简单使用

2024-09-05 09:55:51   220人阅读

CORS 全称"跨域资源共享"（Cross-origin resource sharing）。

跨域就是不同域之间进行数据访问，比如 a.sample.com 访问 b.sample.com 中的数据，我们如果不做任何处理的话，就会出现下面的错误：

XMLHttpRequest cannot load b.sample.com. No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘a.sample.com‘ is therefore not allowed access. The response had HTTP status code 404.

请求和响应信息：

Response Headers
Content-Type:text/html; charset=utf-8
Server:Microsoft-IIS/10.0
X-Powered-By:ASP.NET

Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8
Connection:keep-alive
Content-Length:32384
Host:b.sample.com
Origin:a.sample.com

当请求发起后，Host 会获取 Origin，然后进行判断是否同意这个请求，判断的标准就是 Access-Control-Allow-Origin，如果 Host 服务器指定了 Origin 的配置，那么在响应头就会有：

Access-Control-Allow-Origin:a.sample.com

相关的 Access-Control-*：

  • Access-Control-Allow-Origin：指定请求头中 Origin 是否被访问，如果值为 *，则表示可以让任何 Origin 访问。
  • Access-Control-Request-Method：允许的 HTTP 请求方法，常用 Get、Post、Put 等，如果值为 *，则表示允许所有的 HTTP 请求方法访问。
  • Access-Control-Expose-Headers：客户端默认可以从服务器获取响应头中的 Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma 字段信息，如果需要额外获取其它 header 字段信息，则需要在服务端进行配置。
    Access-Control-Request-Headers：允许客户端向服务器发送的额外请求头信息，和上面的 Access-Control-Expose-Headers 比较相似，但方向是相反的，一般会用在添加自定义 header 的时候，比如 X-Param 等等。
  • Access-Control-Allow-Credentials：如果值为 true，则表示服务端可以接受客户端发送的 Cookie 信息，但客户端请求中需要同时设置withCredentials = true;。
  • Access-Control-Max-Age：请求检查的缓存时间，即在一段时间内，客户端向服务器发送请求，不需要再进行检查 Origin 的配置，而是直接进行请求访问，当然服务器更改配置后除外。

以上是 CORS 的基本相关信息，我们在 ASP.NET MVC 应用程序开发中，需要手动配置 CORS：

public class AllowCorsAttribute : ActionFilterAttribute
{
    private string[] _domains;

    public AllowCorsAttribute(params string[] domains)
    {
        _domains = domains;
    }

    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        var context = filterContext.RequestContext.HttpContext;
        if (context.Request.UrlReferrer != null)
        {
            var host = context.Request.UrlReferrer?.Host;
            if (host != null && _domains.Contains(host))
            {
                context.Response.AddHeader("Access-Control-Allow-Origin", $"http://{host}");
            }
        }
        else
        {
            context.Response.AddHeader("Access-Control-Allow-Origin", "*");
        }
        context.Response.AddHeader("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS, POST, PUT");
        context.Response.AddHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
        base.OnActionExecuting(filterContext);
    }
}

上面代码就是截获每次 Action 请求，手动向请求上下文中增加相应头的配置，以达到 CORS 的目的，Action 配置：

[AllowCors("a.sample.com", "c.sample.com")]
public ActionResult Index()
{
    return View();
}

而在 ASP.NET WebAPI 项目中配置 CORS，就不需要上面那么复杂了，我们只需要安装：

Install-Package Microsoft.AspNet.WebApi.Cors

然后配置启用 CORS：

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.EnableCors();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

最后在对应的 Action 上面添加 CORS 配置就行了：

[EnableCors(origins: "http://a.sample.com", headers: "*", methods: "get,post", SupportsCredentials = true)]
public ActionResult Index()
{
    return View();
}

在 ASP.NET Core 的 CORS 配置和上面差不多，配置方法：

技术分享

ConfigureServices 中添加配置：

public void ConfigureServices(IServiceCollection services)
{
    // Add framework services.
    services.AddMvc();

    services.AddCors(options => options.AddPolicy("CorsSample",
        p => p.WithOrigins("http://a.example.com", "http://c.example.com").AllowAnyMethod().AllowAnyHeader()));
}

Configure 中启用配置：

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    app.UseStaticFiles();

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });

    app.UseCors("CorsSample");
}

Action 启用对应的 CORS，不启用使用[DisableCors]。

[EnableCors("CorsSample")]
public ActionResult Index()
{
    return View();
}

当然 CORS 在 ASP.NET Core 的使用不仅于此，你也可以进行自定义，具体查看最后的参考资料。

跨域除了 CORS，还有其它的解决方式：

  • JSONP：通过在文档中嵌入一个<script>标记来从另一个域中返回数据，所以只支持 GET 请求，但使用比较简单，资料：ASP.NET Web API 配置 JSONP
  • document.domain：JS 配置代码document.domain = ‘sample.com’;，设置完之后，同域之间就可以 JS 互相访问了，但存在一些隐患，比如一个站点被 JS 注入了，那么就会牵扯到其它站点，资料：ASP.NET 页面禁止被 iframe 框架引用

参考资料：

  • CORS 简介
  • 跨域资源共享 CORS 详解
  • Enabling Cross-Origin Requests in ASP.NET Web API 2
  • Enabling Cross-Origin Requests (CORS)
    

参考页面：http://qingqingquege.cnblogs.com/p/5933752.html

ASP.NET Core CORS 简单使用


联系
我们