asp.net core 系列之允许跨域访问2之测试跨域(Enable Cross-Origin Requests:CORS)
这一节主要讲如何测试跨域问题
你可以直接在官网下载示例代码,也可以自己写,我这里直接使用官网样例进行演示
样例代码下载:
一.提供服务方,这里使用的是API
1.创建一个API项目。或者直接下载样例代码
2.像之前讲的那样设置允许CORS,例如:
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseHsts();
} // Shows UseCors with CorsPolicyBuilder.
app.UseCors(builder =>
{
builder.WithOrigins("http://example.com",
"http://www.contoso.com",
"https://localhost:44375",
"https://localhost:5001");
}); app.UseHttpsRedirection();
app.UseMvc();
}
使用的时候,注意 WithOrigins("https://localhost:<port>"); 这个地址替换为客户端地址(即调用方:这里指部分Razor代码)
二.客户端,这里指调用方(页面中js调用),这里指Razor部分的代码
1.创建一个web 应用(Razor pages 或者 mvc )。样例用的Razor Pages 。
2.在index.cshtml中增加如下代码
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
} <div class="text-center">
<h1 class="display-4">CORS Test</h1>
</div> <div>
<input type="button" value="Test"
onclick="requestVal('https://<web app>.azurewebsites.net/api/values')" />
<span id='result'></span>
</div> <script>
function requestVal(uri) {
const resultSpan = document.getElementById('result'); fetch(uri)
.then(response => response.json())
.then(data => resultSpan.innerText = data)
.catch(error => resultSpan.innerText = 'See F12 Console for error');
}
</script>
这里再多说一下,我的操作流程
首先,下载样例代码;
然后,在同一个解决方案中,导入Cors样例代码,如图
然后,可以先把解决方案设置为多个启动项目,启动,看下ClientApp的URL和WebAPI的URL
得到,我的url 分别如下:
ClientApp
http://localhost:65317/ WebApi
http://localhost:65328/
先停止运行,分别设置api的withOrigin和client页面中的地址,代码如下:
WebAPI中的 StartupTest (这个跟Program使用的StartUp文件有关,样例代码中使用的StartUpTest)
// Shows UseCors with CorsPolicyBuilder.
app.UseCors(builder =>
{
builder.WithOrigins("http://example.com",
"http://www.contoso.com",
"https://localhost:44375",
"http://localhost:65317");
});
ClientApp中的Index.cshtml文件代码如下:
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
} <div class="text-center">
<h1 class="display-4">CORS Test</h1>
</div> <div>
<h3>Test results:</h3>
<span id='result'></span>
</div> <div>
<input type="button" value="Test Widget 1"
onclick="requestVal('https://webapi123.azurewebsites.net/api/widget/1')" />
<input type="button" value="Test All Widgets"
onclick="requestJson('https://webapi123.azurewebsites.net/api/widget')" />
<input type="button" value="Test All Val"
onclick="requestJson('https://webapi123.azurewebsites.net/api/values')" />
<input type="button" value="Test Val 1"
onclick="requestVal2('https://webapi123.azurewebsites.net/api/values/1')" />
<input type="button" value="Test Val 2"
onclick="requestVal2('http://localhost:65328/api/values')" />
<input type="button" value="Test Val 3"
onclick="requestJson('http://localhost:65328/api/values')" />
</div> <script>
function requestJson(uri) {
const resultSpan = document.getElementById('result'); fetch(uri)
.then(response => response.json())
.then(data => resultSpan.innerText = data)
.catch(error => resultSpan.innerText = 'See F12 Console for error');
}
</script> <script>
function requestVal2(uri) {
const resultSpan = document.getElementById('result'); fetch(uri)
.then(response => response.text())
.then(data => resultSpan.innerText = data)
.catch(error => resultSpan.innerText = 'See F12 Console for error');
}
</script>
再运行,测试
发现当WebApi中的 WithOrigins 设置正确时,不会报跨域问题,
否则,报跨域问题。
跨域错误截图
如有疑问,可以参考网址:
https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2#cors-policy-options
asp.net core 系列之允许跨域访问2之测试跨域(Enable Cross-Origin Requests:CORS)的更多相关文章
- Ajax跨域问题及解决方案 asp.net core 系列之允许跨越访问(Enable Cross-Origin Requests:CORS) c#中的Cache缓存技术 C#中的Cookie C#串口扫描枪的简单实现 c#Socket服务器与客户端的开发(2)
Ajax跨域问题及解决方案 目录 复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案 一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP ...
- 【目录】asp.net core系列篇
随笔分类 - asp.net core系列篇 asp.net core系列 68 Filter管道过滤器 摘要: 一.概述 本篇详细了解一下asp.net core filters,filter叫&q ...
- 1.1专题介绍「深入浅出ASP.NET Core系列」
大家好,我是IT人张飞洪,专注于.NET平台十年有余. 工作之余喜欢阅读和写作,学习的内容包括数据结构/算法.网络技术.Linux系统原理.数据库技术原理,设计模式.前沿架构.微服务.容器技术等等…… ...
- asp.net core系列 30 EF管理数据库架构--必备知识 迁移
一.管理数据库架构概述 EF Core 提供两种主要方法来保持 EF Core 模型和数据库架构同步.一是以 EF Core 模型为基准,二是以数据库为基准. (1)如果希望以 EF Core 模型为 ...
- asp.net core系列 40 Web 应用MVC 介绍与详细示例
一. MVC介绍 MVC架构模式有助于实现关注点分离.视图和控制器均依赖于模型. 但是,模型既不依赖于视图,也不依赖于控制器. 这是分离的一个关键优势. 这种分离允许模型独立于可视化展示进行构建和测试 ...
- asp.net core系列 39 Web 应用Razor 介绍与详细示例
一. Razor介绍 在使用ASP.NET Core Web开发时, ASP.NET Core MVC 提供了一个新特性Razor. 这样开发Web包括了MVC框架和Razor框架.对于Razor来说 ...
- asp.net core系列 38 WebAPI 返回类型与响应格式--必备
一.返回类型 ASP.NET Core 提供以下 Web API Action方法返回类型选项,以及说明每种返回类型的最佳适用情况: (1) 固定类型 (2) IActionResult (3) Ac ...
- asp.net core系列 36 WebAPI 搭建详细示例
一.概述 HTTP不仅仅用于提供网页.HTTP也是构建公开服务和数据的API强大平台.HTTP简单灵活且无处不在.几乎任何你能想到的平台都有一个HTTP库,因此HTTP服务可以覆盖广泛的客户端,包括浏 ...
- asp.net core系列 31 EF管理数据库架构--必备知识 反向工程
一. 反向工程 反向工程是基于数据库架构,生成的实体类和DbContext类代码的过程,对于Visual Studio开发,建议使用PMC.对于其他开发环境,请选择.NET Core CLI工具( ...
随机推荐
- angular6 页面加载数据时的loading提示
使用npm安装ngx-loading模块 npm install --save ngx-loading 在app.module.ts中导入模块 import { BrowserModule } fro ...
- 【HttpServlet】HttpServlet类
创建时间:6.15 HttpServlet 但在实际开发中,我们不会直接去实现Servlet接口,因为那样需要覆盖的方法太多, 我们一般创建类继承HttpServlet 实现步骤: 1)创建类继 ...
- Git工具使用基础
Git 是一个分布式的版本控制工具,本篇文章从介绍Git开始,重点在于介绍Git的基本命令和使用技巧,让你尝试使用Git的同时,体验到原来一个版 本控制工具可以对开发产生如此之多的影响,文章分为两部分 ...
- #51nod上topcoder练习记
好久没刷51nod了,又听说topcoder有很多好题.那么就来51nod上刷吧.(那个客户端搞得有点烦(看不懂)) [1366 贫富差距] 当图不连通的时候,答案为无穷大. 当图连通时,两个点之间的 ...
- OpenCV 学习笔记(15)openc解帧视频
1 修改读取视频的地址 2 修改保存图片序列的路径 String videopath = "F:/dongdong/0tool/3D/2模型/相机阵列/1_12cam亿级相机/数据/giga ...
- 什么是ES5?js中的'use strict'是什么?目的是什么?
什么是ES5? ECMA Script5:ECMA(欧洲计算机制造联合会)的第五次改版,2009年. js中的'use strict'是什么? js的严格模式 目的: ①添加更多报错的场合,消除代码的 ...
- sass-loader使用data引入公用文件或全局变量报错
报错信息: ValidationError: Invalid options object. Sass Loader has been initialised using an options obj ...
- 第02组Beta冲刺(4/4)
队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...
- 11-散列4 Hashing - Hard Version (30 分)
Given a hash table of size N, we can define a hash function H(x)=x%N. Suppose that the linear probin ...
- git: hook 修改提交信息
git获取数字顺序版本号 因为git的版本使用的是hash值,不能很直观的看出那个版本,所以想找到一种方法,获取顺序的版本号,在网上找到了方法,可以获取顺序版本号 摘自:[使用bash从SVN和Git ...