ASP.NET Core 6框架揭秘实例演示[41]：跨域资源的共享（CORS）N种用法
source link: https://www.cnblogs.com/artech/p/inside-asp-net-core-6-41.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
同源策略是所有浏览器都必须遵循的一项安全原则，它的存在决定了浏览器在默认情况下无法对跨域请求的资源做进一步处理。为了实现跨域资源的共享，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", "[email protected]"),
new Contact("李四","456", "[email protected]"),
new Contact("王五", "789", "[email protected]")
};
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":"[email protected]"},{"name":"李四",
"phoneNo":"456","emailAddress":"[email protected]"},{"name":"王五","phoneNo":"789",
"emailAddress":"[email protected]"}]
[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":"[email protected]"},{"name":"李四",
"phoneNo":"456","emailAddress":"[email protected]"},{"name":"王五","phoneNo":"789",
"emailAddress":"[email protected]"}]
[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", "[email protected]"),
new Contact("李四","456", "[email protected]"),
new Contact("王五", "789", "[email protected]")
};
return Results.Json(contacts);
}
...
Recommend
-
5
ASP.NET Core 6框架揭秘实例演示[01]： 编程初体验 作为《ASP.NET C...
-
8
ASP.NET Core 6框架揭秘实例演示[06]：依赖注入框架设计细节 由于依...
-
4
作为《ASP.NET Core 3框架揭秘》的升级版，《ASP.NET Core 6框架揭秘》提供了很多新的章节，同时对现有的内容进行大量的修改。虽然本书旨在对ASP.NET Core框架的架构设计和实现原理进行剖析，但是其中提供的
-
5
ASP.NET Core框架建立在一个依赖注入框架之上，已注入的方式消费服务已经成为了ASP.NET Core基本的编程模式。为了使读者能够更好地理解原生的注入框架框架，我按照类似的设计创建了一个简易版本的依赖注入框架，并它命名为“Cat”。本篇提供的四个实例主要体现了...
-
4
ASP.NET Core 6框架揭秘实例演示[12]：诊断跟踪的进阶用法 一个好...
-
6
毫不夸张地说，整个ASP.NET Core就是建立在依赖注入框架之上的。ASP.NET Core应用在启动时构建管道所需的服务，以及管道处理请求使用到的服务，均来源于依赖注入容器。依赖注入容器不仅为ASP.NET Core框架自身提供必要的服务，还为应用程序提供服务，依赖注入已...
-
4
我们倾向于将IConfiguration对象转换成一个具体的对象，以面向对象的方式来使用配置，我们将这个转换过程称为配置绑定。除了将配置树叶子节点配置节的绑定为某种标量对象外，我们还可以直接将一个配置节绑定为一个具有对应结构的符合对象。除此之外，配置绑定还...
-
8
ASP.NET Core可以视为一种底层框架，它为我们构建出了基于管道的请求处理模型，这个管道由一个服务器和多个中间件构成，而与路由相关的EndpointRoutingMiddleware和EndpointMiddleware是两个最为重要的中间件。MVC和gRPC开发框架就建立在路由基础上。本篇提供了...
-
3
ASP.NET Core应用具有很多读取文件的场景，如读取配置文件、静态Web资源文件（如CSS、JavaScript和图片文件等）、MVC应用的视图文件，以及直接编译到程序集中的内嵌资源文件。这些文件的读取都需要使用一个IFileProvider对象。IFileProvider对象构建了一个抽象...
-
11
也许你们可能没有接触过Dapr，但是一定对它“有所耳闻”，感觉今年它一下子就火了，一时间很多人都在谈论它。我们从其命名（Dapr的全称是“分布式应用运行时Distributed Application Runtime”）可以看出Dapr的定位，它并不是分布式应用的开发框架，它提供的是更底...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK