前后端分离之CORS和WebApi
目前的项目是前端mv*+api的方式进行开发的，以前都是没有跨域的方案，前后端人员在同一个解决方案里边进行开发，前端人员要用IIS或VS来开发和调试Api,这样就很不方便，迫切需要跨域访问Api.
评选了很多解决方案最终选择，CORS+WebApi
cors科普：http://www.ruanyifeng.com/blog/2016/04/cors.html
cors网站：http://enable-cors.org/
mvc源码：https://github.com/ASP-NET-MVC/aspnetwebstack/blob/master/src/System.Web.Http.Cors/CorsMessageHandler.cs
快速入门可以看一些教程，自己要扩展源码是一条捷径.
示例代码：https://github.com/gutun/aspnet/tree/master/cors
1.新建WebApi项目实现CORS跨域
1.1 新建一个新的项目CrossDomain
1.2. 安装 Microsoft.AspNet.WebApi.Cors
Install-Package Microsoft.AspNet.WebApi.Cors
1.3. 配置App_Start目录下的 WebApiConfig文件
Config中要启用 CORS的支持我选择默认的MediaType为json方式。
1.4 新增UserController，在里边新增两个方法，get用来ping，代表url是通的，post模拟真正的数据提交，我们所有的api访问走post, request的入参和出参可以定义通用的实体。这里模拟post提交数据解析成UserInfo的实例。
2.JQuery Ajax跨域
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$.ajax({
url:'http://localhost:64542/api/user',
type:'POST',
data:{"Id":"1","Name":"张三"},
dataType:'json',
//Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
//contentType: 'application/json; charset=utf-8',
cache: false,
crossDomain: true,
success:function(data){
alert(data);
}
});
</script>
</body>
</html>
使用Nodejs本地服务器访问WebApi项目，成功的访问到了api/User,状态是200.
3.IE8,IE9支持CORS.
CORS在浏览器的支持情况，IE8和IE9是部分兼容，86%的浏览器是支持的，占了大部分，为了支持IE8和IE9我找到了一个补丁jquery.transport.xdr.min.js 用来弥补在IE8和IE9下的不足。
https://github.com/gfdev/javascript-jquery-transport-xdr.js
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!--[if (IE 8)|(IE 9)]>
<script src="http://cdn.rawgit.com/gfdev/javascript-jquery-transport-xdr/master/dist/jquery.transport.xdr.min.js"></script>
<![endif]-->
</head>
<body>
<script>
//http://www.ruanyifeng.com/blog/2016/04/cors.html
$.ajax({
url:'http://localhost:64542/api/user',
type:'POST',
data:{"Id":"1","Name":"张三"},
dataType:'json',
//Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
//contentType: 'application/json; charset=utf-8',
cache: false,
crossDomain: true,
success:function(data){
alert(data);
}
});
</script>
</body>
</html>
喜出往外，跑起来后遇到了，415错误，未识别的Content-Type,这是因为在IE8和IE9下，Content-Type为空造成的。
http://stackoverflow.com/questions/18964258/asp-web-api-post-request-with-cors-and-ie9-xdomainrequest-objec
新增DefaultContentTypeMessageHandler用来处理Request
using System.Net.Http;
using System.Threading;
using System.Threading.Tasks;
using System.Web.Cors;
using System.Web.Http.Cors; namespace CrossDomain
{
public class DefaultContentTypeMessageHandler : DelegatingHandler
{
protected async override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
{
CorsRequestContext corsRequestContext = request.GetCorsRequestContext();
if (corsRequestContext != null) //判断是否是跨域的请求
{
if (request.Method == HttpMethod.Post && request.Content.Headers.ContentType == null) //ConentType为空，使用默认值
request.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/x-www-form-urlencoded");
} var response = await base.SendAsync(request, cancellationToken); return response;
} }
}
再次更改WebApiConfig文件，在MessageHandlers管道中追加刚写的DefaultContentTypeMessageHandler，这样ContentType为空的跨域请求会使用默认的ContentType.
using System.Web.Http;
using System.Web.Http.Cors; namespace CrossDomain
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
//新增CORS支持
var corsAttr = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(corsAttr);
//默认使用json格式，移除xml格式
config.Formatters.XmlFormatter.SupportedMediaTypes.Clear();
//处理Content-Type
config.MessageHandlers.Add(new DefaultContentTypeMessageHandler()); // Web API configuration and services // Web API routes
config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
}
在chrome,IE8，IE9,IE10+上测试没有问题。
前后端分离之CORS和WebApi的更多相关文章
- 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...
- WebAPI 实现前后端分离
随着Web技术的发展,现在各种框架,前端的,后端的,数不胜数.全栈工程师的压力越来越大. 现在的前端的框架,既可以做各种Web,又可以做各种APP,前端框架更新换代越来越快,越来越多. 传统的模式 前 ...
- WebAPI 实现前后端分离的示例
转自:http://www.aspku.com/kaifa/net/298780.html 随着Web技术的发展,现在各种框架,前端的,后端的,数不胜数.全栈工程师的压力越来越大. 现在的前端的框架, ...
- ASP.NET WebApi+Vue前后端分离之允许启用跨域请求
前言: 这段时间接手了一个新需求,将一个ASP.NET MVC项目改成前后端分离项目.前端使用Vue,后端则是使用ASP.NET WebApi.在搭建完成前后端框架后,进行接口测试时发现了一个前后端分 ...
- 无需CORS，用nginx解决跨域问题，轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
- 前后端分离java、jwt项目进行CORS跨域、解决非简单请求跨域问题、兼容性问题
情况描述: 最近在部署一个前后端分离的项目出现了跨域问题*, 项目使用jwt进行鉴权,需要前端请求发起携带TOKEN的请求*,请求所带的token无法成功发送给后端, 使用跨域后出现了兼容性问题:Ch ...
- 前后端分离 导致的 静态页面 加载 <script type="module" > 报CORS 跨域错误，提示 blocked by CORS policy
1.前言 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示Access to script at ftp:///xxx.js ...
- dotnetcore vue+elementUI 前后端分离架二（后端篇）
前言 最近几年前后端分离架构大行其道,而且各种框架也是层出不穷.本文通过dotnetcore +vue 来介绍 前后端分离架构实战. 涉及的技术栈 服务端技术 mysql 本项目使用mysql 作为持 ...
- [开源] angularjs + Asp.net 前后端分离解决方案
本文版权归 博客园 萧秦 所有,此处为技术收藏,如有再转,请于篇头明显位置标明原创作者及出处,以示尊重! 作者:萧秦 原文:http://www.cnblogs.com/xqin/p/4862849. ...
随机推荐
- JavaScript(jquery)实现二级菜单联动
为什么写这篇随笔? 二级菜单的联动一直是我心中一块石头,犹记得大一的时候只会用一点的Dreamweaver,当时做二级菜单难受啊,啥都不会,网上找了些资料,也看不懂别人的代码更别说用起来了 前些日子. ...
- python之list
1.python列表 序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推 序列都可以进行的操作包括索引,切片,加,乘, ...
- Effecvtive Java Note
代码应该被重用,而不是被拷贝 同大多数学科一样,学习编程的艺术首先要学会基本的规则,然后才能知道什么时候可以打破这些规则 创建和销毁对象 1.考虑用静态工厂方法代替构造器. 优势:有名称.不必再每 ...
- NOIP2017游记
日常大考之前感冒(这次感冒了3周..) Day -4~Day 0 停课一周,不写作业不上课是很爽,然而想到NOIP结束第二天就要期中考.. 在学校刷刷题,跟着一大堆大佬的步伐,做着一大堆大佬的题目(其 ...
- bzoj:2595: [Wc2008]游览计划
Description Input 第一行有两个整数,N和 M,描述方块的数目. 接下来 N行, 每行有 M 个非负整数, 如果该整数为 0, 则该方块为一个景点:否则表示控制该方块至少需要的志愿者数 ...
- bzoj:1656 [Usaco2006 Jan] The Grove 树木
Description The pasture contains a small, contiguous grove of trees that has no 'holes' in the middl ...
- [bzoj1731] [Usaco2005 dec]Layout 排队布局
差分约束系统...因为题目要求的是1和n的最大距离所以这题就跑最长路.. 对于互相反感的牛(i与j互相反感,彼此距离至少为len,i<j),就有dis[j]-dis[i]>=len.就加一 ...
- python数据类型（一）
1.数据类型 python中数有四种类型:整数.长整数.浮点数和复数. 整数, 如 1 长整数 是比较大的整数 浮点数 如 1.23.3E-2 复数 如 1 + 2j. 1.1 + 2.2j 2. 自 ...
- SSL数字证书Nginx配置部署
由于小程序和Ios端的需要,公司的项目需要从原来的http协议扩展到https协议,因为项目本来就有采用nginx做了负载均衡,但是之前配置nginx的时候并没有配置关于https的内容,所以需要做这 ...
- Fiddler显示服务器IP的方法
Fiddler默认配置中是看不到服务器IP的,接下来简单介绍下在fiddler上也能够看到请求的服务器IP: 1.Fiddler--->Rules--->Customize Rules , ...