前一篇的跨域请求的方式是松宽的方式,毕竟跨域有安全风险,应尽量少的允许访问必要资源,本篇分别从请求方法,请求头和请求凭据方面了解跨域设置。

请求方法:

api项目,get,post是默认访问,这里只设置了PUT允许访问

using Microsoft.AspNetCore.Cors;var builder = WebApplication.CreateBuilder(args);builder.Services.AddCors(options =>
{options.AddPolicy(name: "Policy2",builder =>{builder.WithOrigins("http://localhost:5280").WithMethods("PUT");});
});
var app = builder.Build();
//注意,这里是没有策略名称的
app.UseCors();
app.MapGet("/test2", [EnableCors("Policy2")] () => "get的结果");
app.MapPost("/test2", [EnableCors("Policy2")] () => "post的结果");
app.MapDelete("/test2", [EnableCors("Policy2")] () => "delete的结果");
app.MapPut("/test2", [EnableCors("Policy2")] () => "put的结果");
app.Map("/test2", [EnableCors("Policy2")] () => "map全部");
app.Run();

页面项目:

@page
@model IndexModel
@{ViewData["Title"] = "Home page";
}
<div class="text-center"><h1 class="display-4">欢迎学习MiniAPI</h1><p>本例是跨域知识的分享。</p>
</div>
<p id="test2-get"></p>
<p id="test2-post"></p>
<p id="test2-delete"></p>
<p id="test2-put"></p>
@section Scripts{
<script>$(function(){$.ajax({url: 'http://localhost:5001/test2',type: 'GET',}).done(function( data, textStatus, jqXHR ) {$("#test2-get").html("test2 get:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test2-get").html("test2 get:"+textStatus)});$.ajax({url: 'http://localhost:5001/test2',type: 'POST',}).done(function( data, textStatus, jqXHR ) {$("#test2-post").html("test2:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test2-post").html("test2:"+textStatus)});$.ajax({url: 'http://localhost:5001/test2',type: 'DELETE',}).done(function( data, textStatus, jqXHR ) {$("#test2-delete").html("test2 delete:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test2-delete").html("test2 detele:"+textStatus)});$.ajax({url: 'http://localhost:5001/test2',type: 'PUT',}).done(function( data, textStatus, jqXHR ) {$("#test2-put").html("test2 put:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test2-put").html("test2 put:"+textStatus)});});
</script>
}

运行结果,delete被拒了

请求Header

api项目,设置是所有请求方法通过

using Microsoft.AspNetCore.Cors;var builder = WebApplication.CreateBuilder(args);
builder.Services.AddCors(options =>
{options.AddPolicy(name: "Policy3",builder =>{builder.WithOrigins("http://localhost:5280").WithHeaders("x-cors-header").AllowAnyMethod();});
});var app = builder.Build();
app.UseCors();
app.MapGet("/test3", [EnableCors("Policy3")] () => "get的结果");
app.MapPost("/test3", [EnableCors("Policy3")] () => "post的结果");
app.MapDelete("/test3", [EnableCors("Policy3")] () => "delete的结果");
app.MapPut("/test3", [EnableCors("Policy3")] () => "put的结果");
app.Map("/test3", [EnableCors("Policy3")] () => "map全部");
app.Run();

页面项目

@page
@model IndexModel
@{ViewData["Title"] = "Home page";
}
<div class="text-center"><h1 class="display-4">欢迎学习MiniAPI</h1><p>本例是跨域知识的分享。</p>
</div>
<p id="test3-get"></p>
<p id="test3-post"></p>
<p id="test3-delete"></p>
<p id="test3-put"></p>
@section Scripts{
<script>$(function(){$.ajax({url: 'http://localhost:5001/test3',type: 'GET',headers: {"x-cors-header":"gsw"}}).done(function( data, textStatus, jqXHR ) {$("#test3-get").html("test3 get:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test3-get").html("test3 get:"+textStatus)});$.ajax({url: 'http://localhost:5001/test3',type: 'POST',headers: {"x-cors-header":"gsw"}}).done(function( data, textStatus, jqXHR ) {$("#test3-post").html("test3 post:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test3-post").html("test3 post:"+textStatus)});$.ajax({url: 'http://localhost:5001/test3',type: 'PUT',headers: {"x-cors-header":"gsw"}}).done(function( data, textStatus, jqXHR ) {$("#test3-put").html("test3 put:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test3-put").html("test3 put:"+textStatus)});$.ajax({url: 'http://localhost:5001/test3',type: 'DELETE',headers: {"x-cors-header":"gsw",   "x-key":"gsw",                  }}).done(function( data, textStatus, jqXHR ) {$("#test3-delete").html("test3 delete:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test3-delete").html("test3 delete:"+textStatus)});                    });
</script>
}

运行结果,delete失败了,因为在delete请求中,夹带了x-key的header,所以没有通过

请求凭据

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

api项目

using Microsoft.AspNetCore.Cors;var builder = WebApplication.CreateBuilder(args);
builder.Services.AddCors(options =>
{  options.AddPolicy(name: "Policy4",builder =>{builder.WithOrigins("http://localhost:5280").AllowCredentials().AllowAnyMethod();});
});
var app = builder.Build();
app.UseCors();
app.MapGet("/test4", [EnableCors("Policy4")] () => "get的结果");
app.MapPost("/test4", [EnableCors("Policy4")] () => "post的结果");
app.MapDelete("/test4", [EnableCors("Policy4")] () => "delete的结果");
app.MapPut("/test4", [EnableCors("Policy4")] () => "put的结果");
app.Map("/test4", [EnableCors("Policy4")] () => "map全部");
app.Run();

页面项目:

@page
@model IndexModel
@{ViewData["Title"] = "Home page";
}
<div class="text-center"><h1 class="display-4">欢迎学习MiniAPI</h1><p>本例是跨域知识的分享。</p>
</div>
<p id="test4-get"></p>
<p id="test4-post"></p>
<p id="test4-delete"></p>
<p id="test4-put"></p>
@section Scripts{
<script>$(function(){$.ajax({url: 'http://localhost:5001/test4',type: 'GET',xhrFields: {withCredentials: true}}).done(function( data, textStatus, jqXHR ) {$("#test4-get").html("test4 get:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test4-get").html("test4 get:"+textStatus)});$.ajax({url: 'http://localhost:5001/test4',type: 'POST',xhrFields: {withCredentials: true}}).done(function( data, textStatus, jqXHR ) {$("#test4-post").html("test4 post:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test4-post").html("test4 post:"+textStatus)});$.ajax({url: 'http://localhost:5001/test4',type: 'PUT',xhrFields: {withCredentials: true}}).done(function( data, textStatus, jqXHR ) {$("#test4-put").html("test4 put:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test4-put").html("test4 put:"+textStatus)});$.ajax({url: 'http://localhost:5001/test4',type: 'DELETE',xhrFields: {withCredentials: true}}).done(function( data, textStatus, jqXHR ) {$("#test4-delete").html("test4 delete:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test4-delete").html("test4 delete:"+textStatus)});});
</script>
}

运行结果:

如果除掉api项目中的凭据

options.AddPolicy(name: "Policy4",builder =>{builder.WithOrigins("http://localhost:5280")               .AllowAnyMethod();});

运行结果:

.NET6之MiniAPI(十五):跨域CORS(下)相关推荐

  1. 跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案

    基本概念 跨域(CORS)请求:同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略, ...

  2. ajax 跨域请求api_【.NET Core 3.0】框架之十二 || 跨域 与 Proxy

    本文有配套视频: https://www.bilibili.com/video/av58096866/?p=8 一.为什么会出现跨域的问题 跨域问题由来已久,主要是来源于浏览器的"同源策略& ...

  3. 【.NET Core 3.0】框架之十二 || 跨域 与 Proxy

    本文有配套视频: https://www.bilibili.com/video/av58096866/?p=8 一.为什么会出现跨域的问题 跨域问题由来已久,主要是来源于浏览器的"同源策略& ...

  4. Node跨域cors模块,nodejs+express跨域

    Node跨域cors模块 NodeJS+Express跨域 什么是CORS CORS(Cross-origin resource sharing),跨域资源共享,是一份浏览器技术的规范,用来避开浏览器 ...

  5. 跨域 cors 请求两次_请求两次的故事-CORS

    跨域 cors 请求两次 The story of requesting twice, allow me to explain how it all began. 请求两次的故事,让我解释一下这是如何 ...

  6. 第5章 uin-app本地主机数据跨域(Cors)数据交互实现

    开发前端App最先需要被实现的功能是:与本地主机上已经布置在IIS服务上的后端数据实现跨域(Cores)交互操作,这也是前端App作为前端工程性项目存在的根本意义和需求,因此需要首先对上一章中示例:2 ...

  7. k8s下使用Ingress开启跨域(CORS)

    在Ingress中,跨域(CORS)的配置如下: nginx.ingress.kubernetes.io/cors-allow-headers: >-DNT,X-CustomHeader,Kee ...

  8. 跨域 -- cors

    Origin . Host . Referer 1.1 Origin -简单请求 GET HTTP/2 Origin: https://h5test.selfshero.com Referrer Po ...

  9. ajax中cors解决跨域,AJAX 跨域 CORS 解决方案

    两种跨域方法 在 Javascript 中跨域访问是比较常见的事情 就像现在比较流行写单页应用,而单页应用在访问 API 的时候就会有跨域的问题 要解决跨域的问题,其实也并不复杂,有两种方案可以选择 ...

最新文章

  1. Failure [INSTALL_FAILED_ALREADY_EXISTS
  2. 如何在 Unix 和 DOS 格式之间转换文本文件
  3. 团队竞争力有多强,你的企业就能走多远
  4. win32窗口机制之CreateWindow
  5. c语言中加法和乘法的消耗,急!!!!c语言:求n次多项式的加法和乘法
  6. python能做什么excel-python可以用来做excel吗
  7. 联合分布,边缘分布,条件分布,互信息
  8. 计算机电路计算公式,电路中相关计算公式.doc
  9. Jetson nano 2G跑通Nvidia官方案例Jetson Inference
  10. android图片添加文字,Android给图片加文字和图片水印
  11. 11年22部!漫威宇宙剧情与电影时间线梳理
  12. ado连接mysql方式_用ADO 连接mysql数据库的方法
  13. 2-13 搭建LAMP环境并部署Ucenter和Ucenter-home网站
  14. opencv C++图像/视频旋转 90度 180度 270度
  15. 二进制安装PLG日志服务
  16. centos shell基础 alias 变量单引号 双引号 history 错误重定向 21 jobs 环境变量 .bash_history source配置文件 nohup ...
  17. 分治法解决最近点对问题
  18. X86加装PCIE网卡无法访问ESXi的问题
  19. 嵌入式uboot移植之三星官方uboot开始移植
  20. ConsenSys 产品ConsenSys Quorum

热门文章

  1. layer和3D仿射变换
  2. FFLIb Demo CQRS
  3. 一个古怪的VISTA网络问题解决的坎坷经历
  4. ASP.NET(c#)常用类函数
  5. linux raw限制端口访出,使用Linux raw socket时需要注意的一些问题
  6. python3函数调用时间_Python3 time clock()方法
  7. Sending HTML content in an email using PHP
  8. ReactNative 触摸事件处理
  9. 20189222 《网络攻防实践》第二周作业
  10. vim编辑器快捷操作