如何mvc webapi 跨域访问web api

来源：蜘蛛抓取(WebSpider) 时间：2016-08-01 04:23 标签： 访问webapi
aspnet网站添加webApi_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
aspnet网站添加webApi
上传于||暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
你可能喜欢2016年1月 总版技术专家分月排行榜第二2015年11月 总版技术专家分月排行榜第二2015年10月 总版技术专家分月排行榜第二
优秀小版主
2016年1月 总版技术专家分月排行榜第二2015年11月 总版技术专家分月排行榜第二2015年10月 总版技术专家分月排行榜第二
优秀小版主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。昨天看了两篇文章：
通过这两篇文章让我了解了WEB API的简单用法。
Parry是在MVC中使用WebAPI：在Visual Studio 2012中新建MVC4项目，在App_Start目录下有一个WebApiConfig.cs文件，这个文件中就是相应的Web API的路由配置了。
我也根据这两篇文章写了一个简单的测试程序。
先创建了一个UserModel
public class UserModel
public string UserID { get; set; }
public string UserName { get; set; }
然后添加Web API Controller
public class UserController : ApiController
public UserModel getAdmin()
return new UserModel() { UserID = "000", UserName = "Admin" };
public static void Register(HttpConfiguration config)
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
在Global中注册
protected void Application_Start(object sender, EventArgs e)
WebApiConfig.Register(GlobalConfiguration.Configuration);
这个时候用地址栏访问地址：api/user/getadmin
这个时侯默认返回的是XML数据模型。
使用AJAX请求这个api，指定数据格式为json
type: 'GET',
url: 'api/user/getadmin',
dataType: 'json',
success: function (data, textStatus) {
alert(data.UserID + " | " + data.UserName);
error: function (xmlHttpRequest, textStatus, errorThrown) {
alert出来的结果是：
这样看来，真的是dudu所说的，可以根据请求的数据类型返回指定的数据格式。
修改一下controller，添加一个add方法
public bool add(UserModel user)
return user != null;
只为了测试，所以这里只判断一下传入的实体是否为空，如果不为空则返回true
我在页面上添加了一个button，代码如下：
&input type="button" name="btnOK" id="btnOK" value="发送POST请求" /&
添加JS代码
$('#btnOK').bind('click', function () {
//创建ajax请求，将数据发送到后台处理
var postData = {
UserID: '001',
UserName: 'QeeFee'
type: 'POST',
url: 'api/user/add',
data: postData,
dataType: 'json',
success: function (data, textStatus) {
alert(data);
error: function (xmlHttpRequest, textStatus, errorThrown) {
再次运行页面
我们附加进程进行调试，在发送ajax请求的时候，服务器段接收到的数据如图：
阅读(...) 评论()webapi地址：
在默认情况下这两个域名属于两个不同的域，他们之间的交互存在跨域的问题，但因为他们都同属于一个二级域名下，所以通过简单的设置就能实现跨域行为，但是考虑到实际生产环境中往往会出现两个域名
完全不同的情况，所以这里不考虑这种特殊的情况，使用更通用的方法来解决跨域的问题。
首先在webapi上有如下所示一个接口
我们需要在我们的web站点下通过ajax方式调用这个接口
此时我们可以看到如下的结果
通过分析上述的监视结果可以看到，这个ajax请求是成功的，但是因为响应头中没有告诉浏览器这个接口可以跨访问，浏览器就拒绝了将请求结果返回给用户。
通过在Action上进行断点，也可以看出，服务器已经收到请求并成功执行了
甚至浏览器本身也已经接收到了响应结果，因为跨域问题所以拒绝返回给用户
所以根据上述的错误提示，我们很容易就能解决跨域这个问题，就是需要在响应头中添加Access-Control-Allow-Origin这个响应数据。在IIS中我们可以在配置文件中直接配置这个响应头，让所有
的请求都能返回这个响应头，当然也可以使用代码对需要的接口进行单独返回相应的响应头，下面是web.config的配置
通过配置上述的配置，指定Access-Control-Allow-Origin响应头的值返回&*&，则表示任何域名都可以访问这个webapi
此时再次访问，可以看到访问成功，并输出了返回结果
在实际应用中，我们可能需要手动设置一些请求头发送给WebApi服务器，如下所示
此时再次访问webapi可以看到不一样的情况
从上图看到，这个请求不仅仅被终止了，而且不是以我们期望的post方式进行请求的，而是使用了options的方式。
了解http协议的同学可能会知道，options方法只是对服务器的一个探测，不会返回相应体。
这里就是浏览器对于跨域发送自定义请求头的一个限制，如果请求跨域并且手动设置了请求头，那么浏览器会发起两次请求，一次是Options的预检，询问服务器是否支持当前这个比较敏感的操作，如果服务器返回了期望的响应头数据，那么浏览器才会正在发起我们的请求。
通过上处分析，web网站要能事先跨站发送请求头，服务器必须支持options的预检，所以这里必须提供服务器的实现。
在微软的WebApi框架中我们可以使用Microsoft.AspNet.WebApi.Cors这个组件来提供支持。
使用Nuget进行安装
安装完毕后再WebApi上对其进行注册
注册完毕，最后我们只需要在我们需要跨域的Action使用特性就可以支持Options预检，进行跨域请求了
再次请求WebApi，我们可能发现请求并不是很成功，不过在IE浏览器下，调试工具给了我们很好的错误提醒。
从上图看到，在Options的预检的响应头中返回了两个Access-Control-Allow-Origin响应头，浏览器提示不允许这样的结果。
仔细回想一下上述的操作可以发现这个响应头其实是我们自己在webconfig中指派服务器自动发送了，这边的操作与之前的配置产生了冲突，删除刚才在Webconfig
中的配置节点即可
删除上述的节点后，再次请求服务器，可以发现正常返回结果了
在上述请求中，浏览器发起了一下Options预检与真正的Post请求。
有时候需要跨域向WebApi传递Cookie等信息，此时我们可能看到这里虽然成功向浏览器写入了Cookie，但是浏览器并不会主动发送Cookie到服务器
如果需要接收到Cookie信息，则需要设置SupportsCredentials属性为true
参考资料：
阅读(...) 评论()通过.NET客户端调用Web API(C#)_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
通过.NET客户端调用Web API(C#)
上传于||暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩10页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢

我要回帖

更多关于 访问webapi 的文章

 

随机推荐