Asp.Net Core WebAPI入门整理(三)跨域处理
一、Core WebAPI中的跨域处理
1.在使用WebAPI项目的时候基本上都会用到跨域处理
2.Core WebAPI的项目中自带了跨域Cors的处理,不需要单独添加程序包
3.使用方法简单
二、使用实例
1.全局配置中启用跨域处理,命名为‘any’,任何都可以访问
public void ConfigureServices(IServiceCollection services) { //配置跨域处理 services.AddCors(options => { options.AddPolicy("any", builder => { builder.AllowAnyOrigin() //允许任何来源的主机访问 .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials();//指定处理cookie }); }); }
2.在控制器或Action的方法注释上使用对应名称的 跨域规则,
[EnableCors("any")]
[Produces("application/json")] [Route("api/Menu")] [EnableCors("any")] //设置跨域处理的 代理 public class MenuController : Controller { }
注:如果在控制器上指定,则控制器内 所有的Action都有对应的跨域限制。
三 、跨域时,Cookie的访问
1.后台通过HttpContext上下文可以直接操作Cookie
[Produces("application/json")] [Route("api/CookieOne")] [EnableCors("any")] public class CookieOneController : Controller { //后台设置Cookie [HttpPut] public IActionResult Add() { ControllerContext.HttpContext.Response.Cookies.Append("name", "中文 ,张三丰"); return Ok(new { msg = "设置成功" }); } //后台获取Cookie,特别 说明对于基础类型的返回值,默认JQuery的ajax解析失败,最好返回IActionResult [HttpGet] public IActionResult Get() { string result = HttpContext.Request.Cookies["url"]; return Content(result); } }
2.前台JQuery的ajax请求,需要携带withCredentials才会将cookie的值保存到客户端
var example1 = new Vue({ el: '#example1', data: { name: '空', url: '空' } }); //1.后台添加cookie function addOne() { $.ajax({ url: urlHelper.getApi('cookieone'), type: 'put', xhrFields: { withCredentials:true //配置http跨域请求中携带cookie }, success: function (data) { console.info(data); //前台获取cookie var name = Cookies.get('name'); console.info(name); example1.name = name; //Vue中修改双向绑定可以通过Vue实例进行,不需要再次通知页面(和AngularJs不同) } }); } addOne(); //2.前台添加Cookie 后台获取 function getOne() { Cookies.set('url', 'http://www.gongjuji.net/'); $.ajax({ url: urlHelper.getApi('cookieone'), type: 'get', contentType: 'application/json', xhrFields: { withCredentials: true //配置http跨域请求中携带cookie }, success: function (data) { console.info(data); example1.url = data; } }); } getOne();
更多: