關於AJAX跨域調用ASP.NET MVC或者WebAPI服務的問題及解決方案

最後更新：2015-06-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

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

</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

其他不說了，認真看完，對跨域有較深的認識

關於AJAX跨域調用ASP.NET MVC或者WebAPI服務的問題及解決方案

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More