同源策略是所有浏览器都必须遵循的一项安全原则，它的存在决定了浏览器在默认情况下无法对跨域请求的资源做进一步处理。为了实现跨域资源的共享，W3C制定了CORS规范。ASP.NET利用CorsMiddleware中间件提供了针对CORS规范的实现。（本文提供的示例演示已经同步到《ASP.NET Core 6框架揭秘-实例演示版》）

[S2901]跨域调用API（源代码）

[S2902]显式指定授权Origin列表（源代码）

[S2903]手工检验指定Origin是否的权限（源代码）

[S2904]基于策略的资源授权（匿名策略）（源代码）

[S2905]基于策略的资源授权（具名策略）（源代码）

[S2906]将CORS规则应用到路由终结点上（代码编程形式）（源代码）

[S2907]将CORS规则应用到路由终结点上（特性标注形式）（源代码）

[S2901]跨域调用API

为了方便在本机环境下模拟跨域API调用，我们通过修改Host文件将本地IP映射为多个不同的域名。我们以管理员身份打开文件“%windir%\System32\drivers\etc\hosts”，并以如下所示的方式添加了针对四个域名的映射。

127.0.0.1       www.foo.com

127.0.0.1       www.bar.com

127.0.0.1       www.baz.com

127.0.0.1       www.qux.com

我们的演示程序由图1所示的两个ASP.NET程序构成。我们将API定义在Api项目中，App是一个JavaScript应用程序，它会在浏览器环境下以跨域请求的方式调用承载于Api应用中的API。

图1　演示实例解决方案结构

如下所示的Api程序中定义了表示联系人的Contact记录类型。我们注册了针对路径“/contacts”的路由使之以JSON的形式返回一组联系人列表。在调用Application对象的Run方法启动时，我们显式指定了监听地址“http://0.0.0.0:8080”。

var app = Application.Create();

app.MapGet("/contacts", GetContacts);

app.Run(url:"http://0.0.0.0:8080");

static IResult GetContacts()

{

    var contacts = new Contact[]

    {

        new Contact("张三", "123", "zhangsan@gmail.com"),

        new Contact("李四","456", "lisi@gmail.com"),

        new Contact("王五", "789", "wangwu@gmail.com")

    };

    return Results.Json(contacts);

}

public readonly record struct Contact(string Name,string PhoneNo ,string EmailAddress);

下面的代码片段展示了App应用程序的完整定义。我们通过注册针对根路径的路由使之现一个包含联系人列表的Web页面，我们在该页面中采用jQuery以AJAX的方式调用上面这个API获取呈现的联系人列表。我们将AJAX请求的目标地址设置为“http://www.qux.com:8080/contacts”。在AJAX请求的回调操作中，可以将返回的联系人以无序列表的形式呈现出来。

var app = Application.Create();

app.MapGet("/", Render);

app.Run(url:"http://0.0.0.0:3721");

static IResult Render()

{

    var html = @"

<html>

    <body>

        <ul id='contacts'></ul>

        <script src='http://code.jquery.com/jquery-3.3.1.min.js'></script>

        <script>

        $(function()

        {

            var url = 'http://www.qux.com:8080/contacts';

            $.getJSON(url, null, function(contacts) {

                $.each(contacts, function(index, contact)

                {

                    var html = '<li><ul>';

                    html += '<li>Name: ' + contact.name + '</li>';

                    html += '<li>Phone No:' + contact.phoneNo + '</li>';

                    html += '<li>Email Address: ' + contact.emailAddress + '</li>';

                    html += '</ul>';

                    $('#contacts').append($(html));

                });

            });

        });

        </script >

    </body>

</html>";

    return Results.Text(content: html, contentType: "text/html");

然后先后启动应用程序Api和App。如果利用浏览器采用映射的域名（www.foo.com）访问App应用，就会发现我们期待的联系人列表并没有呈现出来。如果按F12键查看开发工具，就会发现图29-2所示的关于CORS的错误，具体的错误消息为“Access to XMLHttpRequest at 'http://www.qux.com:8080/contacts' from origin 'http://www.foo.com:3721' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.”。

图2　跨域访问导致联系人无法呈现

有的读者可能会想是否是AJAX调用发生错误导致没有得到联系人信息呢。如果我们利用抓包工具捕捉AJAX请求和响应的内容，就会捕获到如下所示的HTTP报文。可以看出AJAX调用其实是成功的，只是浏览器阻止了针对跨域请求返回数据的进一步处理。如下请求具有一个名为Origin的报头，表示的正是AJAX请求的“源”，也就是跨域（Cross-Orgin）中的“域”。

GET http://www.qux.com:8080/contacts HTTP/1.1

Host: www.qux.com:8080

Connection: keep-alive

Accept: application/json, text/javascript, */*; q=0.01

Origin: http://www.foo.com:3721

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36

Referer: http://www.foo.com:3721/

Accept-Encoding: gzip, deflate

Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7

HTTP/1.1 200 OK

Date: Sat, 13 Nov 2021 11:24:58 GMT

Server: Kestrel

Content-Length: 205

[{"name":"张三","phoneNo":"123","emailAddress":"zhangsan@gmail.com"},{"name":"李四",

"phoneNo":"456","emailAddress":"lisi@gmail.com"},{"name":"王五","phoneNo":"789",

"emailAddress":"wangwu@gmail.com"}]

[S2902]显式指定授权Origin列表

我们可以利用注册的CorsMiddleware中间件来解决上面这个问题。对于我们演示的实例来说，作为资源提供者的Api应用如果希望将提供的资源授权给某个应用程序，可以将作为资源消费程序的“域”添加到授权域列表中。演示程序调用了UseCors扩展方法完成了针对CorsMiddleware中间件的注册，并指定了两个授权的“域”。中间件涉及的服务则通过调用AddCors扩展方法进行注册。

var builder = WebApplication.CreateBuilder();

builder.Services.AddCors();

var app = builder.Build();

app.UseCors(cors => cors.WithOrigins(

    "http://www.foo.com:3721",

    "http://www.bar.com:3721"));

app.MapGet("/contacts", GetContacts);

app.Run(url:"http://0.0.0.0:8080");

...

由于Api应用对“http://www.foo.com:3721”和“http://www.bar.com:3721”这两个域进行了显式授权，如果采用它们来访问App应用程序，浏览器上就会呈现出图3所示的联系人列表。倘若将浏览器地址栏的URL设置成未被授权的“http://www.baz.com:3721”，我们依然得不到想要的显示结果。

图3　针对域的显式授权

下面从HTTP消息交换的角度来介绍这次由Api应用响应的报文有何不同。如下所示的是Api针对地址为“http://www.foo.com:3721”的响应报文，可以看出它多了两个名称分别为Vary和Access-Control-Allow-Origin的报头。前者与缓存有关，它要求在对响应报文实施缓存的时候，选用的Key应该包含请求的Origin报头值，它提供给浏览器授权访问当前资源的域。

HTTP/1.1 200 OK

Date: Sat, 13 Nov 2021 11:24:58 GMT

Server: Kestrel

Vary: Origin

Access-Control-Allow-Origin: http://www.foo.com:3721

Content-Length: 205

[{"name":"张三","phoneNo":"123","emailAddress":"zhangsan@gmail.com"},{"name":"李四",

"phoneNo":"456","emailAddress":"lisi@gmail.com"},{"name":"王五","phoneNo":"789",

"emailAddress":"wangwu@gmail.com"}]

[S2903]手工检验指定Origin是否的权限

对于我们演示的实例来说，当AJAX调用成功并返回联系人列表之后，浏览器正是利用Access-Control-Allow-Origin报头确定当前请求采用的域是否有权对获取的资源做进一步处理的。只有在授权明确之后，浏览器才允许执行将数据呈现出来的操作。从演示程序可以看出“跨域资源共享”所谓的“域”是由协议前缀（如“http://”或者“https://”）、主机名（或者域名）和端口号组成的，但在很多情况下，资源提供在授权的时候往往只需要考虑域名，这样的授权策略可以采用如下所示的方式来解决。UseCors扩展方法返回一个CorsPolicyBuilder对象，我们调用它的SetIsOriginAllowed方法利用提供的Func<string, bool>来设置授权规则，此规则只会考虑域名。

var validOrigins = new HashSet<string>(StringComparer.OrdinalIgnoreCase)

{

    "www.foo.com",

    "www.bar.com"

};

var builder = WebApplication.CreateBuilder();

builder.Services.AddCors();

var app = builder.Build();

app.UseCors(cors => cors.SetIsOrigi0nAllowed(

    origin => validOrigins.Contains(new Uri(origin).Host)));

app.MapGet("/contacts", GetContacts);

app.Run(url:"http://0.0.0.0:8080");

...

[S2904]基于策略的资源授权（匿名策略）

CORS本质上还是属于授权的问题，所以我们采用类似于第28章“授权”介绍的方式将资源授权的规则定义成相应的策略，CorsMiddleware中间件就可以针对某个预定义的策略来实施跨域资源授权。在调用AddCors扩展方法时可以采用如下所示的方式注册一个默认的CORS策略。

var validOrigins = new HashSet<string>(StringComparer.OrdinalIgnoreCase)

{

    "www.foo.com",

    "www.bar.com"

};

var builder = WebApplication.CreateBuilder();

builder.Services.AddCors(options => options.AddDefaultPolicy(policy => policy.

    SetIsOriginAllowed(origin => validOrigins.Contains(new Uri(origin).Host))));

var app = builder.Build();

app.UseCors();

app.MapGet("/contacts", GetContacts);

app.Run(url:"http://0.0.0.0:8080");

...

[S2905]基于策略的资源授权（具名策略）

除了注册一个默认的匿名CORS策略，我们还可以为注册的策略命名。下面的演示程序在调用AddCors扩展方法时注册了一个名为“foobar”的CORS策略，在调用UseCors扩展方法注册CorsMiddleware中间件时就可以显式地指定采用的策略名称。

var validOrigins = new HashSet<string>(StringComparer.OrdinalIgnoreCase)

{

    "www.foo.com",

    "www.bar.com"

};

var builder = WebApplication.CreateBuilder();

builder.Services.AddCors(options => options.AddPolicy("foobar", policy => policy.

    SetIsOriginAllowed(origin => validOrigins.Contains(new Uri(origin).Host))));

var app = builder.Build();

app.UseCors(policyName:"foobar");

app.MapGet("/contacts", GetContacts);

app.Run(url:"http://0.0.0.0:8080");

...

[S2906]将CORS规则应用到路由终结点上（代码编程形式）

除了在调用UseCors扩展方法时指定Cors策略外，我们还可以在注册终结点的时候将Cors规则作为路由元数据应用到终结点上。如下的演示程序在调用MapGet方法注册了针对“/contacts”路径的终结点后会返回一个RouteHandlerBuilder对象，它接着调用该对象的RequireCors扩展方法来指定采用的CORS策略名称。

var validOrigins = new HashSet<string>(StringComparer.OrdinalIgnoreCase)

{

    "www.foo.com",

    "www.bar.com"

};

var builder = WebApplication.CreateBuilder();

builder.Services.AddCors(options => options.AddPolicy("foobar", policy => policy.

    SetIsOriginAllowed(origin => validOrigins.Contains(new Uri(origin).Host))));

var app = builder.Build();

app.UseCors();

app.MapGet("/contacts", GetContacts).RequireCors(policyName:"foobar");

app.Run(url:"http://0.0.0.0:8080");

...

[S2907]将CORS规则应用到路由终结点上（特性标注形式）

我们也可以按照如下的方式在终结点处理方法GetContacts上标注EnableCorsAttribute特性，并利用其“policyName”参数来指定采用的CORS策略名称。如果使用Lambda表达式来定义终结点处理器，我们可以将EnableCorsAttribute特性直接标注在Lambda表达式前面。

using Microsoft.AspNetCore.Cors;

var validOrigins = new HashSet<string>(StringComparer.OrdinalIgnoreCase)

{

    "www.foo.com",

    "www.bar.com"

};

var builder = WebApplication.CreateBuilder();

builder.Services.AddCors(options => options.AddPolicy("foobar", policy => policy.

    SetIsOriginAllowed(origin => validOrigins.Contains(new Uri(origin).Host))));

var app = builder.Build();

app.UseCors();

app.MapGet("/contacts", GetContacts);

app.Run(url:"http://0.0.0.0:8080");

[EnableCors(policyName: "foobar")]

static IResult GetContacts()

{

    var contacts = new Contact[]

    {

        new Contact("张三", "123", "zhangsan@gmail.com"),

        new Contact("李四","456", "lisi@gmail.com"),

        new Contact("王五", "789", "wangwu@gmail.com")

    };

    return Results.Json(contacts);

}

...

ASP.NET Core 6框架揭秘实例演示[41]：跨域资源的共享（CORS）花式用法的更多相关文章

  1. ASP.NET Core 6框架揭秘实例演示[07]：文件系统

    ASP.NET Core应用具有很多读取文件的场景,如读取配置文件.静态Web资源文件(如CSS.JavaScript和图片文件等).MVC应用的视图文件,以及直接编译到程序集中的内嵌资源文件.这些文 ...

  2. ASP.NET Core 6框架揭秘实例演示[08]：配置的基本编程模式

    .NET的配置支持多样化的数据源,我们可以采用内存的变量.环境变量.命令行参数.以及各种格式的配置文件作为配置的数据来源.在对配置系统进行系统介绍之前,我们通过几个简单的实例演示一下如何将具有不同来源 ...

  3. ASP.NET Core 6框架揭秘实例演示[09]：配置绑定

    我们倾向于将IConfiguration对象转换成一个具体的对象,以面向对象的方式来使用配置,我们将这个转换过程称为配置绑定.除了将配置树叶子节点配置节的绑定为某种标量对象外,我们还可以直接将一个配置 ...

  4. ASP.NET Core 6框架揭秘实例演示[10]：Options基本编程模式

    依赖注入使我们可以将依赖的功能定义成服务,最终以一种松耦合的形式注入消费该功能的组件或者服务中.除了可以采用依赖注入的形式消费承载某种功能的服务,还可以采用相同的方式消费承载配置数据的Options对 ...

  5. ASP.NET Core 6框架揭秘实例演示[11]：诊断跟踪的几种基本编程方式

    在整个软件开发维护生命周期内,最难的不是如何将软件系统开发出来,而是在系统上线之后及时解决遇到的问题.一个好的程序员能够在系统出现问题之后马上定位错误的根源并找到正确的解决方案,一个更好的程序员能够根 ...

  6. ASP.NET Core 6框架揭秘实例演示[12]：诊断跟踪的进阶用法

    一个好的程序员能够在系统出现问题之后马上定位错误的根源并找到正确的解决方案,一个更好的程序员能够根据当前的运行状态预知未来可能发生的问题,并将问题扼杀在摇篮中.诊断跟踪能够帮助我们有效地纠错和排错&l ...

  7. ASP.NET Core 6框架揭秘实例演示[13]：日志的基本编程模式[上篇]

    <诊断跟踪的几种基本编程方式>介绍了四种常用的诊断日志框架.其实除了微软提供的这些日志框架,还有很多第三方日志框架可供我们选择,比如Log4Net.NLog和Serilog 等.虽然这些框 ...

  8. ASP.NET Core 6框架揭秘实例演示[14]：日志的进阶用法

    为了对各种日志框架进行整合,微软创建了一个用来提供统一的日志编程模式的日志框架.<日志的基本编程模式>以实例演示的方式介绍了日志的基本编程模式,现在我们来补充几种"进阶" ...

  9. ASP.NET Core 6框架揭秘实例演示[15]：针对控制台的日志输出

    针对控制台的ILogger实现类型为ConsoleLogger,对应的ILoggerProvider实现类型为ConsoleLoggerProvider,这两个类型都定义在 NuGet包"M ...

  10. ASP.NET Core 6框架揭秘实例演示[16]：内存缓存与分布式缓存的使用

    .NET提供了两个独立的缓存框架,一个是针对本地内存的缓存,另一个是针对分布式存储的缓存.前者可以在不经过序列化的情况下直接将对象存储在应用程序进程的内存中,后者则需要将对象序列化成字节数组并存储到一 ...

随机推荐

  1. [AIGC]GPT模型概述

    2 Open AI: ChatGPT 2.0 ChatGPT 官网 https://openai.com/ https://platform.openai.com/ 原 : https://beta. ...

  2. ModelAndView方法的返回值类型

    一.ModelAndView @RequestMapping("/selectById") public ModelAndView queryById(Integer id){ M ...

  3. 【Note】（坑）一些组合恒等式的实际意义理解（和待填坑的组合数学知识）

    目录 排列组合 恒等式 (1) \(C_n^m=C_n^{n-m}\) (2) \(A_n^m+mA_n^{m-1}=A_{n+1}^m\) (3) \(C_n^{m-1}+C_n^{m}=C_{n+ ...

  4. LeeCode数组问题（一）

    LeeCode 27:移除元素 题目描述: 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度length. 不要使用额外的数组空间,你 ...

  5. day90:luffy:基于vue+drf的路飞学城项目前端部署

    目录 1.域名备案 2.域名解析 3.设置安全组 4.部署架构图 5.一些准备工作 6.docker 7.把前端项目通过nginx容器来运行 后端部署传送门:基于vue+drf的路飞学城项目后端部署 ...

  6. [INS-40996] Installer has detected that the Oracle home (/home/grid) is not empty in the following nodes: [rac2] --求助帖？

    问题描述:12c安装grid的时候,一直再报一个[INS-40996] Installer has detected that the Oracle home (/home/grid) is not ...

  7. Docker介绍下载安装、制作镜像及容器、做目录映射、做端口映射

    在计算机中,虚拟化(英语:Virtualization)是一种资源管理技术,是将计算机的各种实体资源,如服务器.网络.内存及存储等,予以抽象.转换后呈现出来,打破实体结构间的不可切割的障碍,使用户可以 ...

  8. Java学习笔记02

    1. 运算符和表达式 运算符 ​ 就是对常量或者变量进行操作的符号. ​ 如:+ - * / 表达式 ​ 用运算符把常量或者变量连接起来的,符合Java语法的式子就是表达式. ​ 如:a + b ​ ...

  9. Java 的 SPI 机制

    什么是SPI机制? SPI机制( Service Provider Interface)是Java的一种服务发现机制,为了方便应用扩展.那什么是服务发现机制?简单来说,就是你定义了一个接口,但是不提供 ...

  10. Indent----- IndentationError: unexpected indent

    Unexpected indent 错误 注意,Python 中实现对代码的缩进,可以使用空格或者 Tab 键实现.但无论是手动敲空格,还是使用 Tab 键,通常情况下都是采用 4 个空格长度作为一个 ...