ASP.NET CORE实现跨域
目录
- 一、后台API接口
- 二、前端界面
- 三、测试
- 1、不设置允许跨域
- 2、设置允许所有来源跨域
- 2.1、在StartUp类的ConfigureServices方法中添加如下代码：
- 2.2、修改Configure方法
- 2.3、测试
- 3、设置特定来源可以跨域
- 3.1、修改ConfigureServices方法代码如下：
- 3.2、修改Configure代码如下：
- 3.3测试
- 4、优化
- 5、利用配置文件实现跨域
- 5.1、修改appsettings.json文件如下：
- 5.2、增加CorsOptions实体类
- 5.3、新增OptionConfigure方法
- 5.4、在ConfigureServices方法里面调用OptionConfigure方法
- 5.5、修改Configure方法，增加IOptions<CorsOptions>类型的参数，最终代码如下
一、后台API接口
用.net core创建一个Web API项目负责给前端界面提供数据。
二、前端界面
建立两个MVC项目，模拟不同的ip，在view里面添加按钮调用WEB API提供的接口进行测试跨域。view视图页代码如下：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>跨域测试1</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
function btnGet() {
$.ajax({
url: 'https://localhost:44355/api/values',
type: "Get",
dataType: "json",
success: function (data) {
alert("成功");
},
error: function (data) {
alert("失败");
}
});
}
</script>
</head>
<body>
<div>
<input type="button" id="btn" value="测试跨域" onclick="btnGet()" />
</div>
</body>
</html>
三、测试
1、不设置允许跨域
首先，先不设置.net core允许跨域，查看调用效果：
点击测试跨域1按钮：
F12进入Debug模式查看失败原因：
从这里可以看出来是因为产生了跨域问题，所以会失败。
点击测试跨域2的效果和此效果一致。
2、设置允许所有来源跨域
2.1、在StartUp类的ConfigureServices方法中添加如下代码：
// 配置跨域处理，允许所有来源
services.AddCors(options =>
options.AddPolicy("cors",
p => p.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials()));
2.2、修改Configure方法
// 允许所有跨域，cors是在ConfigureServices方法中配置的跨域策略名称
app.UseCors("cors");
2.3、测试
从截图中可以看出，这次调用成功了。
3、设置特定来源可以跨域
3.1、修改ConfigureServices方法代码如下：
//允许一个或多个来源可以跨域
services.AddCors(options =>
{
options.AddPolicy("CustomCorsPolicy", policy =>
{
// 设定允许跨域的来源，有多个可以用','隔开
policy.WithOrigins("http://localhost:21632")
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
});
这里设置只允许ip为http://localhost:21632的来源允许跨域。
3.2、修改Configure代码如下：
// 设定特定ip允许跨域 CustomCorsPolicy是在ConfigureServices方法中配置的跨域策略名称
app.UseCors("CustomCorsPolicy");
3.3测试
点击跨域测试1按钮，结果如下：
可以看到访问成功了，然后在点击跨域测试2按钮，结果如下：
发现这次访问失败了，F12进入Debug模式，查看失败原因：
从截图中可以看出是因为这里产生了跨域请求，但是没有允许跨域测试2所在的ip跨域。那么如果也想让跨域测试2可以调用成功该怎么办呢？
光标定位到WithOrigins上面，然后F12查看定义：
从截图中发现：WithOrigins的参数是一个params类型的字符串数组，如果要允许多个来源可以跨域，只要传一个字符串数组就可以了，所以代码修改如下：
//允许一个或多个来源可以跨域
services.AddCors(options =>
{
options.AddPolicy("CustomCorsPolicy", policy =>
{
// 设定允许跨域的来源，有多个可以用','隔开
policy.WithOrigins("http://localhost:21632", "http://localhost:24661")
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
});
这时跨域测试2也可以调用成功了
4、优化
在上面的例子中，需要分两步进行设置才可以允许跨域，有没有一种方法只需要设置一次就可以呢？在Configure方法中只设置一次即可，代码如下：
// 设置允许所有来源跨域
app.UseCors(options =>
{
options.AllowAnyHeader();
options.AllowAnyMethod();
options.AllowAnyOrigin();
options.AllowCredentials();
});
// 设置只允许特定来源可以跨域
app.UseCors(options =>
{
options.WithOrigins("http://localhost:3000", "http://127.0.0.1"); // 允许特定ip跨域
options.AllowAnyHeader();
options.AllowAnyMethod();
options.AllowCredentials();
});
5、利用配置文件实现跨域
在上面的示例中，都是直接把ip写在了程序里面，如果要增加或者修改允许跨域的ip就要修改代码，这样非常不方便，那么能不能利用配置文件实现呢？看下面的例子。
5.1、修改appsettings.json文件如下：
{
"Logging": {
"LogLevel": {
"Default": "Warning"
}
},
"AllowedHosts": {
"url": "http://localhost:21632|http://localhost:24663"
}
}
AllowedHosts里面设置的是允许跨域的ip，多个ip直接用“|”进行拼接，也可以用其他符合进行拼接。
5.2、增加CorsOptions实体类
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace CorsDomainDemo
{
public class CorsOptions
{
public string url { get; set; }
}
}
5.3、 新增OptionConfigure方法
private void OptionConfigure(IServiceCollection services)
{
services.Configure<CorsOptions>(Configuration.GetSection("AllowedHosts"));
}
5.4、在ConfigureServices方法里面调用OptionConfigure方法
// 读取配置文件内容 OptionConfigure(services);
5.5、修改Configure方法，增加IOptions<CorsOptions>类型的参数，最终代码如下
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
namespace CorsDomainDemo
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
// 配置跨域处理，允许所有来源
//services.AddCors(options =>
//options.AddPolicy("cors",
//p => p.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials()));
//允许一个或多个来源可以跨域
//services.AddCors(options =>
//{
// options.AddPolicy("CustomCorsPolicy", policy =>
// {
// // 设定允许跨域的来源，有多个可以用','隔开
// policy.WithOrigins("http://localhost:21632", "http://localhost:24661")
// .AllowAnyHeader()
// .AllowAnyMethod()
// .AllowCredentials();
// });
//});
// 读取配置文件内容
OptionConfigure(services);
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, IOptions<CorsOptions> corsOptions)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseHsts();
}
// 允许所有跨域，cors是在ConfigureServices方法中配置的跨域策略名称
//app.UseCors("cors");
// 设定特定ip允许跨域 CustomCorsPolicy是在ConfigureServices方法中配置的跨域策略名称
//app.UseCors("CustomCorsPolicy");
// 设置允许所有来源跨域
//app.UseCors(options =>
//{
// options.AllowAnyHeader();
// options.AllowAnyMethod();
// options.AllowAnyOrigin();
// options.AllowCredentials();
//});
// 设置只允许特定来源可以跨域
//app.UseCors(options =>
//{
// options.WithOrigins("http://localhost:3000", "http://127.0.0.1"); // 允许特定ip跨域
// options.AllowAnyHeader();
// options.AllowAnyMethod();
// options.AllowCredentials();
//});
// 利用配置文件实现
CorsOptions _corsOption = corsOptions.Value;
// 分割成字符串数组
string[] hosts = _corsOption.url.Split('|');
// 设置跨域
app.UseCors(options =>
{
options.WithOrigins(hosts);
options.AllowAnyHeader();
options.AllowAnyMethod();
options.AllowCredentials();
});
app.UseHttpsRedirection();
app.UseMvc();
}
private void OptionConfigure(IServiceCollection services)
{
services.Configure<CorsOptions>(Configuration.GetSection("AllowedHosts"));
}
}
}
这样就可以实现利用配置文件实现允许跨域了。
到此这篇关于ASP.NET CORE实现跨域的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
谈谈如何在ASP.NET Core中实现CORS跨域
CORS(Cross-origin resource sharing)是一个W3C标准,翻译过来就是 "跨域资源共享",它主要是解决Ajax跨域限制的问题. CORS需要浏览器和服务器支持,现在所有现代浏览器都支持这一特性.注:IE10及以上 只要浏览器支持,其实CORS所有的配置都是在服务端进行的,而前端的操作浏览器会自动完成. 在本例中,将演示如何再ASP.NET Core中实现CORS跨域. 前期准备 你需要windows系统. 你需要安装IIS. 推荐使用VS2015 Upda
-
ASP.NET WebAPI2复杂请求跨域设置的方法介绍
ASP.Net Core的跨域设置比较简单 官方都整合了 具体的参见微软官方文档: https://docs.microsoft.com/zh-cn/aspnet/core/security/cors?view=aspnetcore-3.1#ecors 跨域条件 跨域是指的当前资源访问其他资源时发起的http请求由于安全原因(由于同源策略,域名.协议.端口中只要有一个不同就不同源),浏览器限制了这些请求的正常访问,特别需要注意的是这些发生在浏览器中. 解决方法 方法1.web.config文件
-
ASP.NET中Web API解决跨域问题
一.什么是跨域问题 跨域:指的是浏览器不能执行其他网站的脚本.是由浏览器的同源策略造成的,是浏览器施加的安全限制.(服务端可以正常接收浏览器发生的请求,也可以正常返回,但是由于浏览器的安全策略,浏览器不能处理服务端的返回). 那么什么是同源策略呢? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.CSFR等攻击.所谓同源是指"协议+域名+端口"
-
asp.net基于JWT的web api身份验证及跨域调用实践
随着多终端的出现,越来越多的站点通过web api restful的形式对外提供服务,很多网站也采用了前后端分离模式进行开发,因而在身份验证的方式上可能与传统的基于cookie的Session Id的做法有所不同,除了面临跨域提交cookie的烦人问题外,更重要的是,有些终端可能根本不支持cookie. Json Web Token(jwt)是一种不错的身份验证及授权方案,简单的说就是调用端调用api时,附带上一个由api端颁发的token,以此来验证调用者的授权信息. 但由于时间关系,不对jw
-
ASP.net WebAPI跨域调用问题的解决方法
发现问题 最近在做一个项目,前端是VUE,后端是WebAPI,业务也就是一些实体的增删改查.在项目开始的时候我就预计到有跨域的问题,所以也找了一下资料,在Web.Config里面加上了配置信息: <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-A
-
支持Ajax跨域访问ASP.NET Web Api 2(Cors)的示例教程
随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是两个Web网站项目了,前端项目主要负责界面的呈现和一些前端的相应业务逻辑处理,而Web Api则负责提供数据. 这样问题就来了,如果前端通过ajax访问Web Api项目话,就涉及到跨域了.我们知道,如果直接访问,正常情况下Web Api是不允许这样做的,这涉及到安全问题.所以,今天我们这篇文章的主
-
asp.net core webapi 服务端配置跨域的实例
在前后端分离开发中服务端仅仅只为前端提供api接口,并且前后端往往单独部署,此时就会出现浏览器跨域问题.asp.net core提供了简单优雅的解决方案. 在startup文件的Configure添加如下代码(替换"http://localhost:8080"为你的前端部署地址,此处测试的前端地址为本地的8080端口) 注:asp.net core2.0以下需安装nuget包:Microsoft.AspNetCore.Cors app.UseCors(builder => { b
-
ASP.NET MVC中设置跨域访问问题
1.什么是跨域请求 js禁止向不是当前域名的网站发起一次ajax请求,即使成功respone了数据,但是你的js仍然会报错.这是JS的同源策略限制,JS控制的并不是我们网站编程出现了问题.客户端(网页)和后台编程都可以有效解决这个问题.客户端可以通过JSONP来完成跨域访问:在ES6中为了解除同源策略问题,想出一个办法:当被请求网站为响应头respone添加了一个名为Access-Control-Allow-Origin的header,设置其值等于发起请求网站的域名地址的话,这次请求被视为允许.
-
ASP.NET CORE实现跨域
目录 一.后台API接口 二.前端界面 三.测试 1.不设置允许跨域 2.设置允许所有来源跨域 2.1.在StartUp类的ConfigureServices方法中添加如下代码: 2.2.修改Configure方法 2.3.测试 3.设置特定来源可以跨域 3.1.修改ConfigureServices方法代码如下: 3.2.修改Configure代码如下: 3.3测试 4.优化 5.利用配置文件实现跨域 5.1.修改appsettings.json文件如下: 5.2.增加CorsOptions实
-
asp.net中WebResponse 跨域访问实例代码
前两天,一个朋友让我帮他写这样一个程序:在asp.net里面访问asp的页面,把数据提交对方的数据库后,根据返回的值(返回值为:OK或ERROR),如果为OK再把填入本地数据库.当时,想当然,觉得很简单,用js的xmlhttp ,如果根据response 的值是"OK"就执行提交本地数据库.很快写完发过去,让朋友试试,一试发现不行,后来一问,原来是跨域访问,我给忽略了,于是让朋友把asp改成web service,可朋友说程序是合作公司做的,只会asp,不会用web service ,
-
asp.net关于Cookie跨域（域名）的问题
跨二级域名 我们知道cookie是可以跨二级域名来访问,这个很好理解,例如你 www.test1.com 在的web应用程序创建了一个cookie,要想在bbs.test1.com这样的二级域名对应的应用程序中访问,就必须你在创建cookie的时候设置domain参数domain=test1.com. 以asp.net为例 代码如下: 复制代码 代码如下: HttpCookie cookie = new HttpCookie("name", "www.Admin10000.c
-
ASP.NET Core 2.0中Razor页面禁用防伪令牌验证
在这篇短文中,我将向您介绍如何ASP.NET Core Razor页面中禁用防伪令牌验证. Razor页面是ASP.NET Core 2.0中增加的一个页面控制器框架,用于构建动态的.数据驱动的网站:支持跨平台开发,可以部署到Windows,Unix和Mac操作系统. 跨站点请求伪造(也称为XSRF或CSRF)是对Web托管应用程序的攻击,因为恶意网站可能会影响客户端浏览器和浏览器信任网站之间的交互.这种攻击是完全有可能的,因为Web浏览器会自动在每一个请求中发送某些身份验证令牌到请求网站.这种
-
asp.net Cookie跨域、虚拟目录等设置方法
Cookie有三个属性需要注意一下: . Domain 域 . Path 路径 . Expires 过期时间 跨域操作需要设置域属性: Response.Cookies("MyCookie").Domain = "jb51.net"; (这里指的是泛域名) 这样在其它二级域名下就都可以访问到了, ASP 和 ASP.NET 测试通过 虚拟目录下访问: 我在ASP端做了下测试,.NET的没试, 如果不指定Path属性, 不同虚拟目录下Cookie无法共享 将Respo