〇、前言

当把开发好的 WebApi 接口,部署到 Windows 服务器 IIS 后,postman 可以直接访问到接口并正确返回,这并不意味着任务完成,毕竟接口嘛是要有交互的,最常见的问题莫过于跨域了。

若前端文件是在当前接口文件下的 wwwroot 文件夹下,那么接口的访问就没问题,因为是同协议(http、https)、同地址(域名)、同端口,不存在跨域问题

但是,若前端和接口不是部署在一起的,那么一般都会存在跨域问题,本文将通过两种方式介绍如何使接口允许跨域请求。

一、IIS 配置实现

1、生效范围

如下图:

1 位置为 IIS 根目录,在此属性中配置“HTTP响应标头”时,作用域为“网站”下级目录中的全部应用。若后面修改了单个应用的 Headers,当更新应用文件后,修改会被还原。

2 位置是指定某一网站,在此属性中配置“HTTP响应标头”时,作用域为当前应用,不对其他同级应用有影响。

  

2、常用的配置项共有四个

HTTP 响应标头 是否必含 解释
Access-Control-Allow-Origin * 或 http://IP:Port 允许跨域请求的地址,* 代表允许全部,若指定地址则仅支持填入一个
Access-Control-Allow-Headers Content-Type 当接口仅提供 Get 请求时,可省略;另外客户端添加的自定义请求头,需再次进行允许配置
Access-Control-Allow-Methods POST, GET, OPTIONS, PUT, DELETE, UPDATE 此处列出了全部常用的方法名,可根据需要可适当删除个别值
Access-Control-Allow-Credentials 默认为 false,可配置为 true 允许客户端携带验证信息,例如 cookie 之类的。为 true 时,不允许 Origin 设置为“*”

二、C# 代码实现

1、配置示例

主要是通过在 Startup.cs 文件中的 ConfigureServices() 方法添加跨域服务策略(services.AddCors()),然后在 Configure() 方法中将跨域策略加入到 HTTP 请求管道(HTTP request pipeline)中。

先列举一个实例,.Net 5.0 配置兼容预检请求,如下代码:

public void ConfigureServices(IServiceCollection services)
{
// ...
// 添加跨域策略
services.AddCors(options =>
{
// 配置默认策略和中间件:options.AddDefaultPolicy(policy =>{policy.WithOrigins("");});app.UseCors(); // 将自动应用于所有控制器终结点
options.AddPolicy("CorsPolicyName0519", policy =>
{
policy
//.AllowAnyOrigin() // AllowAnyOrigin 允许任何源地址的访问
.WithOrigins("http://IP:Port") // 仅允许一个地址访问
//.WithOrigins(new string[]{"http://IP1:Port1","http://IP2:Port2","http://IP3:Port3"}) // 支持同时允许多个指定地址的访问
//.AllowAnyHeader() // 允许任何的Header头部标题
.WithHeaders("Account", "ClientType", "OrgId", "Token", "Department", "EntAuthVebr") // 自定义请求头
//.AllowAnyMethod() // 允许任何方法
.WithMethods(HttpMethods.Options, HttpMethods.Get, HttpMethods.Post, HttpMethods.Put, HttpMethods.Delete) // 允许的谓词方法
//.AllowCredentials() // 允许跨源请求发送凭据 允许时 Origin 不允许为“*”
.SetPreflightMaxAge(TimeSpan.FromHours(24)); // 设置预检请求的最大缓存时间
});
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
// ...
app.UseCors("CorsPolicyName0519"); // 添加 CORS 中间件,允许跨域访问
// ...
}

跨域请求策略可以同时配置多个。

使用 [EnableCors] 属性可以有针对性的启用同一个 CORS。也可以对需要 CORS 的终结点配置指定的策略名称,来实现最佳控制。

  • [EnableCors] 指定默认策略。
  • [EnableCors("{Policy String}")] 指定命名策略。

[EnableCors] 属性可应用于:控制器、控制器操作方法、Razor Page PageModel。

将 [EnableCors] 属性应用于控制器、操作方法或页面模型,并将中间件加入到管道来启用 CORS 时, 将这两种策略将同时生效。

与 [EnableCors] 相反的,[DisableCors] 属性标识禁用跨域策略。

通常,UseStaticFiles 在 之前 UseCors调用 。 使用 JavaScript 跨站点检索静态文件的应用必须在 UseStaticFiles 之前调用 UseCors。

2、关于 设置允许的发送请求的源地址 WithOrigins()

.AllowAnyOrigin:允许具有任何协议(http 或 https)的所有源的 CORS 请求。也就是说任何网站都可以向应用发出跨域请求,会导致跨网站请求伪造,因此并不安全。

.WithOrigins("http://IP1:Port1","http://IP2:Port2"):允许同时配置多个指定地址。(参数类型实际为:new string[]{ })

但是要配置具体的请求地址比较多时,全部通过 string[] 列出的话很不优雅,此时就需要通过通配符域来达到配置多地址的目的。

例如,当需求为允许多个地址(例如:*.example.com、https://*.example.net 同一后缀的多个域名通配符)时,就可以用到如下配置:

  SetIsOriginAllowedToAllowWildcardSubdomains:将策略的 IsOriginAllowed 属性设置为一个函数,当计算是否允许源时,此函数允许源匹配已配置的通配符域。

services.AddCors(options =>
{
options.AddPolicy(name: MyAllowSpecificOrigins,
policy =>
{
policy
.WithOrigins("https://*.example.com","https://*.example.net") // 等效于:new string[]{"地址1","地址2"}
.SetIsOriginAllowedToAllowWildcardSubdomains();
});
});

3、关于 设置允许的 HTTP 方法 WithMethods()

这个就没啥好说的了,需要那种就配置进去好了。

常用的就三种:Get、Post、Options。另外不常用的有六种:Put、Delete、Patch、Trace、Connect、Head。详见:HTTP 请求方法

4、关于设置允许的请求头 WithHeaders()

 .AllowAnyHeader():允许任何名称的 Header 属性。这种情况下,很容易出现非默认的请求头,导致触发预检请求 Options,影响系统性能,下文章节会着重介绍。

 .WithHeaders(HeaderNames.ContentType, HeaderNames.UserAgent):指定允许多个请求头。(参数类型实际为:new string[]{ })

当客户端需要添加指定的请求头,需要在 WithHeaders() 方法中全部配置上。

5、关于设置允许的响应头 WithExposedHeaders()

默认情况下,浏览器不会向应用公开所有响应头。默认可用的响应头包括:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。

.WithExposedHeaders(HeaderNames.Server,HeaderNames.Status):允许同时配置多个响应头。(参数类型实际为:new string[]{ })

6、设置允许跨源域请求发送凭据 AllowCredentials()

凭据需要在 CORS 请求中进行特殊处理。 默认情况下,浏览器不会使用跨源域请求发送凭据。 凭据包括 cookie 和 HTTP 身份验证方案。 要使用跨源请求发送凭据,客户端必须将 Credentials 设置为 true,默认情况下为 false。

.AllowCredentials():允许跨源请求发送凭据。

HTTP 响应包含一个 Access-Control-Allow-Credentials 头,它告诉浏览器服务器允许跨源请求的凭据。

如果浏览器发送凭据,但响应不包含有效的 Access-Control-Allow-Credentials 头,则浏览器不会向应用公开响应,而且跨源请求会失败。

允许跨源凭据会带来安全风险。另一个域中的网站可以在用户不知情的情况下代表用户将登录用户的凭据发送到应用。

CORS 规范还指出,如果存在 Access-Control-Allow-Credentials 头,则将源 Origins 设置为“*”(所有源)是无效的,如下图报错提示:

  

参考:https://learn.microsoft.com/zh-cn/aspnet/core/security/cors?view=aspnetcore-6.0#cors-with-named-policy-and-middleware

  https://learn.microsoft.com/zh-cn/aspnet/core/security/cors?view=aspnetcore-6.0#set-the-allowed-origins

三、关于预检请求 Options

1、什么是预检请求?

“发送非简单跨域请求前的预检请求”,若该请求未正常返回,浏览器会阻止后续的请求发送。

注:Chrome 和 Microsoft Edge 浏览器不会在 F12 工具的 Network 选项卡上显示 OPTIONS 请求,需要额外配置,打开地址:chrome://flags/#out-of-blink-cors 或 edge://flags/#out-of-blink-cors,禁用,重启生效;Firefox 浏览器默认显示 OPTIONS 请求。

如下图,是一个预检请求的 headers 信息:

  

2、什么情况下会触发预检请求

预检请求(Options)属于实际请求(Get、Post 等)之外的操作,仅在部分情况下触发。

想达到不触发 Options 方法的目的,需同时满足下面三个条件:

  • 请求方法为 GET、POST 或 HEAD
  • 应用不会设置 Content-Type、Content-Language、Accept、Accept-Language 或 Last-Event-ID 以外的请求头
  • Content-Type 头(如果已设置)具有以下三个值之一:application/x-www-form-urlencoded、multipart/form-data、text/plain

预检请求可能包含以下 Headers:

  • Access-Control-Request-Method/Methods:将用于实际请求的 HTTP 方法。
  • Access-Control-Request-Headers:应用在实际请求上设置的请求头的列表。 如前文所述,这不包含浏览器设置的标头,如 User-Agent、Host、Content-Length 等。

如果预检请求被拒绝,应用将返回 200 OK 响应,但不会设置 CORS 头,浏览器后续也就不会尝试跨源请求。

3、预检请求的 [HttpOptions] 属性

当使用适当的策略启用 CORS 时,ASP.NET Core 通常会自动响应 CORS 预检请求。 但在某些情况下, 例如通过终结点路由使用 CORS,是不会自动响应的。

以下是官网给出的实例,分别是带参数的 Options 请求和不带参数两种:

详见官网:https://learn.microsoft.com/zh-cn/aspnet/core/security/cors?view=aspnetcore-6.0#tcer

[Route("api/[controller]")]
[ApiController]
public class TodoItems2Controller : ControllerBase
{
// OPTIONS: api/TodoItems2/5
[HttpOptions("{id}")]
public IActionResult PreflightRoute(int id)
{
return NoContent();
}
// OPTIONS: api/TodoItems2
[HttpOptions]
public IActionResult PreflightRoute()
{
return NoContent();
}
}

4、设置预检过期时间 SetPreflightMaxAge()

Access-Control-Max-Age 头指定对预检请求的响应可以缓存多长时间。

此方法的目的是在第一次预检请求成功后,将预检结果缓存一段时间,从而避免重复的预检请求,提升应用性能。

代码配置跨域策略时,可通过 .SetPreflightMaxAge() 来实现,如下代码:

// 添加跨域策略
services.AddCors(options =>
{
options.AddPolicy("CorsPolicyName007", policy =>
{
policy
.WithOrigins("http://127.0.0.1:7000" , "http://127.0.0.1:8000" )
.SetPreflightMaxAge(TimeSpan.FromHours(24)) // 设置预检请求的最大缓存时间
;
});
});

参考:https://learn.microsoft.com/zh-cn/aspnet/core/security/cors?view=aspnetcore-6.0#tcer

.NET Core 允许跨域的两种方式实现(IIS 配置、C# 代码实现)的更多相关文章

  1. ajax处理跨域有几种方式

    一.什么是跨域 同源策略是由Netscape提出的著名安全策略,是浏览器最核心.基本的安全功能,它限制了一个源(origin)中加载文本或者脚本与来自其他源(origin)中资源的交互方式,所谓的同源 ...

  2. php跨域的几种方式

    PHP实现跨域的几种形式 1.JSONP(JSON with padding)原理 利用html里面script标签可以加载其他域下的js这一特性,使用script src的形式来获取其他域下的数据, ...

  3. SpringMVC解决跨域的两种方案

    1. 什么是跨域 2. 跨域的应用情景 3. 通过注解的方式允许跨域 4. 通过配置文件的方式允许跨域 1. 什么是跨域 跨域,即跨站HTTP请求(Cross-site HTTP request),指 ...

  4. SpringBoot 中实现跨域的几种方式

    一.为什么会出现跨域问题 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. ...

  5. 跨域的两种解决方法jsonp和CORS

    1.跨域 什么是跨域? 当你请求的url是不同源的数据的时候,浏览器一般会抛出请求跨域的错误,如下图: 造成跨域的原因? 即你违反了浏览器的同源策略的限制=>阻止一个域的js脚本和另外一个域的内 ...

  6. spring boot 解决 跨域 的两种方法 -- 前后端分离

    1.前言 以前做项目 ,基本上是使用 MVC 模式 ,使得视图与模型绑定 ,前后端地址与端口都一样 , 但是现在有些需求 ,需要暴露给外网访问 ,那么这就出现了个跨域问题 ,与同源原则冲突, 造成访问 ...

  7. 深入浅出:了解jsonp跨域的九种方式

    什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信 ...

  8. 跨域的几种方式以及call(),apply() bind()方法的作用和区别

    jsonp: jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议. 一个是描述信息的格式,一个是信息传递 ...

  9. ajax 跨域的几种方式

    网络上跨域的文章大多一样,这里我写下,巩固下自己的知识,顺便做个记录 什么是跨域 这里简单拿百度的网址做个例子:http://www.baidu.com:80 (默认都是80端口.可省略) http ...

  10. Springboot设置跨域的三种方式

    方式一(精细配置) 在需要跨域的整个Controller或者单个方法上添加@CrossOrigin注解 方式二(全局配置) @Configuration public class WebMvcConf ...

随机推荐

  1. 人工智能 deepface 换脸技术 学习

    介绍 Deepface是一个轻量级的python人脸识别和人脸属性分析(年龄.性别.情感和种族)框架.它是一种混合人脸识别框架缠绕状态的最先进的模型:VGG-Face,Google FaceNet,O ...

  2. 开源Apinto网关-流量策略

    背景介绍 Apinto是一款高性能.可扩展.易维护的API网关. Apinto网关基于GO语言模块化开发,5分钟极速部署,配置简单.易于维护,支持集群与动态扩容,企业级开箱即用.Apinto除了提供丰 ...

  3. day08 元组字典集合

    day08 元组 集合 字典 元组 """ 小括号括起来,内部存放多个元素,元组之间逗号隔开,元素不可改变,元素类型不能是任意的, """ ...

  4. 深入理解 Redis 新特性:Stream

    该数据结构需要 Redis 5.0.0 + 版本才可用使用 概述 Redis stream 是 Redis 5 引入的一种新的数据结构,它是一个高性能.高可靠性的消息队列,主要用于异步消息处理和流式数 ...

  5. 【Vue2.x源码系列07】监听器watch原理

    上一章 Vue2计算属性原理,我们介绍了计算属性是如何实现的?计算属性缓存原理?以及洋葱模型是如何应用的? 本章目标 监听器是如何实现的? 监听器选项 - immediate.deep 内部实现 初始 ...

  6. StringBuilder类用法解析

    一.StringBuilder说明 StringBuilder是一个可变的字符序列.这个类提供了一个与StringBuffer兼容的API,但不保证同步,即StringBuilder不是线程安全的,而 ...

  7. 学习Golang时遇到的似懂非懂的概念

    背景 这是我学习golang的第三天,大致已经掌握了golang的语法,但是着手开发的时候,却遇到了许多问题,例如golang导包机制.golang的项目管理规范.go mod生成project怎么管 ...

  8. 【CSS】画出宽度为1像素的线或边框

    由于多倍的设计图在移动设备上显示时会将设计图进行缩小到视口宽度,而1px的边框没有随着页面进行缩小而导致效果太粗,想要还原设计图1px的显示效果,因此需要一些方法来实现边框宽度小于1px. 实现方法很 ...

  9. 【python爬虫】bilibili综合热门页面视频图片爬取

    此博客仅作为交流学习 我用python来爬取bilibili综合热门页面视频图片 首先分析页面: 如上图所示,当我们想要在页面爬取图片时,往往得不到页面图片的地址,这时我们也得不到图片 开始抓包分析: ...

  10. 卧槽Winform也可以这么好看?

    Winform也可以这么好看? 对于Winform很多人的刻板印象就是拖拉拽,简单生产界面,但是这样对于界面的效果,它并不会很好,虽然简单,快,但是效果也是极差,所以有很多人就去使用WPF,去写xml ...