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

以下是详细的攻略：

1. CORS（跨域资源共享）的概述

在Web开发中，跨域访问是很常见的需求，比如，同源策略会限制浏览器跨域访问。CORS就是一种机制，它可以让Web服务器能够支持跨域访问，以使得Web应用程序能够更好的响应客户端请求。

CORS是通过设置HTTP响应头来支持的，示例代码如下：

Access-Control-Allow-Origin: *

这里的“*”表示允许来自所有源的请求。

2. 配置CORS

接下来我们来看如何配置CORS。我们采用ASP.NET Web Api 2来示范。

第一步：安装Microsoft.AspNet.WebApi.Cors

我们需要在我们的Web Api项目中安装Microsoft.AspNet.WebApi.Cors，使用NuGet包管理器即可完成。命令如下：

Install-Package Microsoft.AspNet.WebApi.Cors

第二步：在WebApiConfig.cs中添加如下代码：

public static void Register(HttpConfiguration config)
{
    // 启用CORS
    var cors = new EnableCorsAttribute("*", "*", "*");
    config.EnableCors(cors);

    // 其他代码
}

这里的第一个参数表示允许来自所有域的请求。第二个参数和第三个参数都设置为“*”，表示允许所有的请求类型和所有的请求头信息。

第三步：在Controller的方法上添加如下代码

[EnableCors("*", "*", "*")]
public class MyController : ApiController
{
    // ...
}

这里的[EnableCors]是一个特性属性，表示当前Controller中所有的Action都允许跨域访问。参数和第二步的代码是一样的。

至此，我们就完成了CORS的配置。

3. 示例说明

下面我们通过两个示例来说明如何使用CORS。

示例一：从一个不同域名的网页中发起AJAX请求

1. 生成一个Console应用程序，用于模拟浏览器端，使用以下代码：

string url = "http://localhost:52312/api/values";
WebClient client = new WebClient();
string result = client.DownloadString(url);
Console.WriteLine(result);

这里的url表示Web Api的地址，这里使用的是http://localhost:52312/api/values。

1. 创建一个ASP.NET MVC应用程序，用于模拟Wen Api。

2. 新建一个Web Api控制器类ValuesController，使用以下代码：

[EnableCors("*", "*", "*")]
public class ValuesController : ApiController
{
    // GET: api/Values
    public IEnumerable<string> Get()
    {
        return new string[] { "value1", "value2" };
    }

    // GET: api/Values/5
    public string Get(int id)
    {
        return "value";
    }

    // POST: api/Values
    public void Post([FromBody]string value)
    {
    }

    // PUT: api/Values/5
    public void Put(int id, [FromBody]string value)
    {
    }

    // DELETE: api/Values/5
    public void Delete(int id)
    {
    }
}

这里的[EnableCors]表示当前Controller中所有的Action都允许跨域访问。

1. 启动ASP.NET MVC应用程序，并将Console应用程序的地址修改为ASP.NET MVC应用程序的地址，运行Console应用程序后，即可看到从Web Api返回的数据。

示例二：使用jQuery从一个不同域名的网页中发起AJAX请求

步骤同上，只需要在前端页面添加如下代码即可：

$.ajax({
    type: "GET",
    url: "http://localhost:52312/api/values",
    dataType: "json",
    success: function (data) {
        console.log(data);
    }
});

这里的url同样表示Web Api的地址。$.ajax是jQuery的AJAX方法，用于发起AJAX请求。