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

简介: 原文:http://www.cnblogs.com/chenxizhang/p/3821703.html   问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况。

原文: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

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

 

补充:

web.config中配置解决跨域问题,在实际中无法跨域

临时解决方法:在客户端使用中间层做代理

以下是php网站间接调用

<?php
error_reporting(0);
 
$destURL="http://xx.cn/api/Post";
 
$queryString=$_SERVER['QUERY_STRING'];
if($_SERVER['REQUEST_METHOD']=='GET'){
    $url=$destURL.$queryString;
    echo file_get_contents($url);
}
else{
    $url=$destURL.$queryString;
    $context = array();
    $context['http'] = array(
        'method' => 'POST',
        'header'  => 'Content-type: application/x-www-form-urlencoded',
        'content' => http_build_query($_POST)
    );
    echo file_get_contents($url, false, stream_context_create($context));
}
?>

另外,使用jsonp测试也本地实现了,回头再写

 

相关文章
|
3月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
38 0
|
24天前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
24 0
|
1月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
94 5
|
2月前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
|
4月前
|
JSON 开发框架 .NET
ASP.NET Core Web API设置响应输出的Json数据格式的两种方式
ASP.NET Core Web API设置响应输出的Json数据格式的两种方式
|
5月前
|
开发框架 自然语言处理 前端开发
基于ASP.NET MVC开发的、开源的个人博客系统
基于ASP.NET MVC开发的、开源的个人博客系统
51 0
|
5月前
|
开发框架 前端开发 .NET
用ajax和asp.net实现智能搜索功能
用ajax和asp.net实现智能搜索功能
43 0
|
8月前
|
开发框架 .NET 中间件
Swagger的 ASP.NET Core Web API 帮助页
使用 Web API 时,了解其各种方法对开发人员来说可能是一项挑战。 Swagger 也称为OpenAPI,解决了为 Web API 生成有用文档和帮助页的问题。 它具有诸如交互式文档、客户端 SDK 生成和 API 可发现性等优点。
69 0
|
8月前
|
开发框架 JSON .NET
使用 ASP.NET Core 创建 Web API系列
使用 ASP.NET Core 创建 Web API系列
160 0
|
8月前
|
SQL 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(完:内附源码)
经过一段时间的准备,【ASP.NET Core MVC开发实战之商城系统】已经完成,目前代码已开发完成,先将全部内容整理分享,如有不足之处,还请指正。
104 0

相关实验场景

更多