Asp.net Core CORS(跨域资源共享)实验
环境:Asp.Net Core 2
1、问题
最近项目在调用远程UI时遇到点麻,在调用远程CSS文件时无法加载其中的字体文件。远程CSS文件对字体的定义:
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
…
}
浏览器没有按照预想的那样访问到远程字体资源并抛出了异常:
大意是CORS策略阻止了从http://localhost:2093访问http://www.*/js/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0中字体,请求资源没有“Access-Control-Allow-Origin”报头。
根据浏览器抛出的异常信息判断,显然是和CORS策略有关,第一时间想到的是Cors中间件。修改Startup.cs 将CORS策略设定为允许所有报头,允许所有源地址,允许所有方法。
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
…
app.UseCors(builder =>
builder.AllowAnyHeader().AllowAnyOrigin().AllowAnyMethod());
…
}
不幸的是上面策略并没有影响结果,访问远程字体依然报错。看来问题没这么简单。问题是由CORS策略引起,也想趁此机会也补习一下CORS相关知识,为此设计了一个小实验来加深对CORS的理解。
2、回顾CORS
网上已有很多文章专题介绍CORS,这里不再赘述,可以参考:
http://www.cnblogs.com/artech/p/cors-4-asp-net-web-api-02.html
http://hbin.me/blog/2015/08/17/cross-origin-resource-sharing/
CORS基本规则是:
- 请求报头需要有Origin: http://www.foo.com,
- 响应报头需要有Access-Control-Allow-Origin: http://www.foo.com。
来看一下CORS完整工作流程图:
第1步:浏览器向地址为http://localhost:1900的WebApp请求页面;
第2步:WebApp返回Html页面给浏览器;
第3步:浏览器解析页面,确定跨域资源访,浏览器按照CORS规则对跨域资源访问请求进行封装,在报头添加Origin: http://localhost:1900等;
第4步:资源服务器localhost:1800接收到请求,将收到的报头与CORS策略进行比对。符合策略则返回响应,响应报头带有Access-Control-Allow-Origin: http://localhost:1900,
最后浏览器收到响应,判断报头是否符合CORS策略,符合则显示,不符合则阻止。
通过上面流程可以看出CORS依赖于浏览器,因为是浏览器负责判断是否是跨域请求并进请求的行封装,收到响应后也是浏览器判断是否符合CORS规则并进行显示。接下来通过一个实验来看看浏览器在CORS中的作用。
3、实验
环境
服务端使用WebApi http://localhost:1800/api/values暴露一个服务,作为被访问的资源。CORS策略为:
app.UseCors(builder => builder.WithOrigins("http://localhost:1900"));
准备四个不同的客户端环境:
- WebApp1 http://localhost:1900/ 上使用ajax调用http://localhost:1800/api/values
- WebApp2 http://localhost:2000/ 上使用ajax调用http://localhost:1800/api/values
- WebApp3 http://localhost:2100/ 上使用HttpClient发起一个简单请求调用http://localhost:1800/api/values
- 任意主机上安装Postman
过程
首先我们在浏览器中分别访问端口号为1900、2000、2100的三个Web地址,最后使用Postman直接调用远程地址。
结果
WebApp1情况完全符合CORS策略,也得到了预计中的结果。
WebApp2由浏览器发起一个xhr,不符合策略因而被阻止。
WebApp3请求的发起是背后的HttpClient,并没有通过浏览器。HttpClient发起请求时并有封装CORS所需的信息,仅仅是一个简单请求到http://localhost:1800/api/values,服务器“如实”的返回了结果,需要注意的是此时服务器CORS策略并没有生效,HttpClient收到响应并把结果呈现在页面上,整个过程都没有CORS的影子。
最后使用Postman调用远程地址,其原理与HttpClient访问完全一样。
4、小结
CORS策略只在浏览器+XHR的条件下才有效,它是浏览器与服务器之间协调机制,不能当作安全机制使用。
Asp.net Core CORS(跨域资源共享)实验的更多相关文章
- Asp.net Core CORS 跨域
本文主要介绍在Asp.net Core采用CORS方式解决跨域 关于跨域的原理介绍可参考Asp.net Web API 解决跨域详解 1 在Startup添加允许跨域的策略 services.AddC ...
- 在ASP.NET Web API中实现CORS(跨域资源共享)
默认情况下,是不允许网页从不同的域访问服务器资源的,访问遵循"同源"策略的原则. 会遇到如下的报错: XMLHttpRequest cannot load http://local ...
- ASP.NET Core 启用跨域请求
本文翻译整理自:https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1 一 .Cross-Orig ...
- CORS跨域资源共享
CORS(跨域资源共享)跨域问题及解决 当使用ajax跨域请求时,浏览器报错:XmlHttpRequest error: Origin null is not allowed by Access-Co ...
- CORS跨域资源共享你该知道的事儿
"唠嗑之前,一些客套话" CORS跨域资源共享,这个话题大家一定不陌生了,吃久了大转转公众号的深度技术好文,也该吃点儿小米粥溜溜胃里的缝儿了,今天咱们就再好好屡屡CORS跨域资源共 ...
- django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享
一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01 ...
- 跨域漏洞丨JSONP和CORS跨域资源共享
进入正文之前,我们先来解决个小问题,什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 跨域常见的两种方式,分别是JSONP和CORS. 今天i ...
- 浅谈跨域问题,CORS跨域资源共享
1,何为跨域? 在理解跨域问题之前,你先要了解同源策略和URL,简单叙述: 1)同源策略 三同:协议相同,域名相同,端口相同: 目的:保证用户信息安全,防止恶意网站窃取数据.同源策略是必须的,否则co ...
- Node.js实现CORS跨域资源共享
什么是CORS CORS(Cross-origin resource sharing),跨域资源共享,是一份浏览器技术的规范,用来避开浏览器的同源策略 简单来说就是解决跨域问题的除了jsonp外的另一 ...
- tomcat7.0配置CORS(跨域资源共享)
平时我们做前台页面时可能会遇到浏览器以下提示(浏览器控制台): 已阻止跨源请求:同源策略禁止读取位于 http://xxx.xxx.com 的远程资源.(原因:CORS 头缺少 'Access-Con ...
随机推荐
- 如何生成[0,maxval]范围内m个随机整数的无重复的有序序列
在这里我们将待生成的数据结构称为IntSet,接口定义如下: class IntSetImp { public: IntSetImp(int maxelements,int maxval); void ...
- ReentrantLock 学习
Java接口Lock有三个实现类:ReentrantLock.ReentrantReadWriteLock.ReadLock和ReentrantReadWriteLock.WriteLock.Lock ...
- poj 1088(记忆化搜索)
滑雪 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 88560 Accepted: 33212 Description ...
- jdk之object源码理解
Java所有类都继承与Object,本文谈谈我对object源码的理解,如果有错的,请看官多多批评指正. 1.registerNatives() private static native void ...
- 【初探移动前端开发04】jQuery Mobile 一
网格布局 jquery mobile提供一种多列布局功能,由于移动设备的屏幕大小原因,一般情况还是不要使用多列布局啦. jquery mobile提供一种css样式规则来定义多列布局,对应css为ui ...
- iwebshop 增加页面访问次数实时
class里面的主控制器初始化时添加如下代码 //更新页面访问次数 $siteConfig = new Config('site_config'); $sFilePath =$siteConfig-& ...
- 转:西部数据NAS设备hack
通过该文学习一下常见硬件web漏洞.重点关注一下几个方面: 1.登录验证代码: 2.文件上传代码: 3.system/exec/popen等是否存在注入可能: 4.调用二进制文件: 5.未登陆可以访问 ...
- 洛谷P2713 罗马游戏
题目传送门 分析: 好吧,其实没什么好分析的,左偏树裸题. Code: #include<cstdio> #include<cstring> #include<cstdl ...
- 洛谷P3391文艺平衡树(Splay)
题目传送门 转载自https://www.cnblogs.com/yousiki/p/6147455.html,转载请注明出处 经典引文 空间效率:O(n) 时间效率:O(log n)插入.查找.删除 ...
- SpringBoot+Mybatis整合实例
前言 大家都知道springboot有几大特点:能创建独立的Spring应用程序:能嵌入Tomcat,无需部署WAR文件:简化Maven配置:自动配置Spring等等.这里整合mybatis,创建一个 ...