关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案

原文:http://www.cnblogs.com/chenxizhang/p/3821703.html

问题描述

当跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况。

重现方式

1.使用模板创建一个最简单的ASP.NET Web API项目,调试起来确认能正常工作

public class TestController : ApiController
    {
        // GET api/test
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }
        // GET api/test/5
        public string Get(int id)
        {
            return "value";
        }
        // POST api/test
        public void Post([FromBody]string value)
        {
        }
        // PUT api/test/5
        public void Put(int id, [FromBody]string value)
        {
        }
        // DELETE api/test/5
        public void Delete(int id)
        {
        }
    }

2.创建另外一个项目,仅仅包含一个HTML页面,发起AJAX的调用

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
            var url = "http://localhost:49136/api/test";

            $ajax({
                type: "GET",
                contentType: "application/json",
                url: url,
                datatype: ‘json‘,
                success: function (result) {
                    alert(result);
                }
            });
        });
    </script>
</head>
</html>

3.在浏览器中打开这个网页,我们会发现如下的错误(405:Method Not Allowed)

【备注】同样的情况,也发生在ASP.NET MVC中。某些时候,MVC也可以直接用来开发服务,与WebAPI相比各有优缺点。下面是一个利用MVC开发的服务的例子

    public class HomeController : Controller
    {
        // GET: /Home/
        public ActionResult Index()
        {
            return Json(new { Id = 1 }, JsonRequestBehavior.AllowGet);
        }
    }

原因分析

跨域问题仅仅发生在Javascript发起AJAX调用,或者Silverlight发起服务调用时,其根本原因是因为浏览器对于这两种请求,所给予的权限是较低的,通常只允许调用本域中的资源,除非目标服务器明确地告知它允许跨域调用。

所以,跨域的问题虽然是由于浏览器的行为产生出来的,但解决的方法却是在服务端。因为不可能要求所有客户端降低安全性。

解决方案

针对ASP.NET MVC和ASP.NET Web API两种项目类型,我做了一些研究,确定下面的方案是可行的。

针对ASP.NET MVC,只需要在web.config中添加如下的内容即可

<system.webServer>

<httpProtocol>

<customHeaders>

<add name="Access-Control-Allow-Origin" value="*" />

<add name="Access-Control-Allow-Headers" value="Content-Type" />

<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />

</customHeaders>

</httpProtocol>

<handlers>

<remove name="ExtensionlessUrlHandler-Integrated-4.0" />

<remove name="OPTIONSVerbHandler" />

<remove name="TRACEVerbHandler" />

<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />

</handlers>

</system.webServer>

针对ASP.NET Web API,除了上面这样的设置,还需要添加一个特殊的设计,就是为每个APIController添加一个OPTIONS的方法,但无需返回任何东西。

public string Options()

{

return null; // HTTP 200 response with empty body

}

=========================================================================================

以下是瞎扯

最近用webapi写了个小项目,基于.NET 4.0,遇到这个跨域的问题,就被坑死,这里要先感谢下博主

有问题肯定找度娘,显示发现用JSONP来实现,找了以下比较经典的文章

http://www.cnblogs.com/Kummy/p/3767269.html

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

看了好多文章,js和服务端都要做一些麻烦的配置,最后发现一个更大的坑:只支持get。顿时,泪奔,我用的是高大上的post。

http://diaosbook.com/Post/2013/12/27/tips-for-aspnet-webapi-cors

在该文发现可以用Microsoft.AspNet.WebApi.Cors, 注意:只支持4.5以上(偷偷泪奔)

需要学习cors的,可以看看artech 的系列爽文,哈哈,共8章

http://www.cnblogs.com/artech/p/cors-4-asp-net-web-api-01.html

其他不说了,认真看完,对跨域有较深的认识

时间: 2024-12-28 18:47:17

关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案的相关文章

AJAX跨域调用ASP.NET MVC或者WebAPI服务的解决方案

问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况. 重现方式 使用模板创建一个最简单的ASP.NET Web API项目,调试起来确认能正常工作 public class UserController : ApiController { public UserModel getInfo() { UserModel um = new UserModel(); um.Uid = 5; um.UserName =

自己的项目结合MVC实现ajax跨域调用

好久没写东西了,自我检讨一下,写不完这篇不下班!! 最近在做一个项目模块通用的分享功能插件,由于各个模块调用所以会出现跨域问题,正好之前同事解决过,于是自己亲身实践把这次解决问题的经历记录下来.闲言少叙,书归正传~ 首先,项目背景,一个基于jquery的分享插件开发,自己也是尝试着写这么个东西,第一次写,质量肯定差,下次博文把这次开发经历写出来.由于这次解决ajax跨域的方法很简单,我就粘贴代码简单说明一下. 第一步:编写后台程序,MVC下代码如下:      //这是一个获取某个用户的通讯录分

调用ajax 跨域调用接口

//ajax 跨域请求数据 function ajaxType (){ $.ajax({ url: "http://127.0.0.1:9090/spring_mvc/HttpClient/ajaxType.do?jsonpCallback=?", type: "GET", data: { pwd: encodeURI('周'), username: 'tl' }, dataType: "jsonp", success: function(dat

以短链服务为例,探讨免AppKey、免认证、Ajax跨域调用新浪微博API

新浪微博的API官方提供了很多种调用方式,支持编程的,归根结底就是两种: 1.基于Oauth协议,使用Open API.(http://open.weibo.com/wiki/%E6%8E%88%E6%9D%83%E6%9C%BA%E5%88%B6%E8%AF%B4%E6%98%8E) 2.使用Weibo JS-SDK(http://open.weibo.com/sdk/js ). 官方的方式总是显得很麻烦.我们来探讨一下,能不能通过非官方的方法,免AppKey.免认证.Ajax跨域调用新浪微博

AJAX跨域调用相关知识-CORS和JSONP(引)

AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常会遇到在一个页面的JS代码中,需要通过AJAX去访问另一个服务器并返回数据,这时候就会受到浏览器跨域的安全限制了. 这里要注意,如果只是通过AJAX向另一个服务器发送请求而不要求数据返回,是不受跨域限制的.浏览器只是限制不能访问另一个域的数据,即不能访问返回的数据,并不限制发送请求. 我们接下来就为

web api 跨域请求,ajax跨域调用webapi

1.跨域问题仅仅发生在Javascript发起AJAX调用,或者Silverlight发起服务调用时,其根本原因是因为浏览器对于这两种请求,所给予的权限是较低的,通常只允许调用本域中的资源,除非目标服务器明确地告知它允许跨域调用.假设我们页面或者应用已在 http://www.test1.com 上了,而我们打算从 http://www.test2.com 请求提取数据.一般情况下,如果我们直接使用 AJAX 来请求将会失败,浏览器也会返回“源不匹配”的错误,"跨域"也就以此由来. 2

Jquery Ajax 跨域调用asmx类型 WebService范例

摘要:Ajax 在 Web 2.0 时代起着非常重要的作用,然而有时因为同源策略(SOP)(俗称:跨域问题(cross domain)) 它的作用会受到限制.在本文中,将学习如何克服合作限制.本文以asmx方式搭建webservice作为测试用后端,给出完整的前后端调用解决方案.范例代码. 关键词: jquery ajax 跨域  webservice  asmx  cross-domain 0 问题分析 0.1 什么是跨域问题? 越来越多的网站需要相互协作.例如,在线房屋租赁网站需要谷歌地图的

支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示

随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是两个Web网站项目了,前端项目主要负责界面的呈现和一些前端的相应业务逻辑处理,而Web Api则负责提供数据. 这样问题就来了,如果前端通过ajax访问Web Api项目话,就涉及到跨域了.我们知道,如果直接访问,正常情况下Web Api是不允许这样做的,这涉及到安全问题.所以,今天我们这篇文章的主

如何通过js跨域调用ASP.NET Web API (请问如何实现在javascript中通过http get的方式跨域调用ASP.NET Web API?)

客户端js无需任何专门设置,使用通常的ajax调用即可: $.ajax({ url: '跨域URL', type: 'get', dataType: 'json', success: function (data) { $('#banner_right').html(data); } }); 服务端需要在WebApiConfig.Register()中添加如下的代码 public static class WebApiConfig { public static void Register(Ht