webapi支持跨域访问

写在前面

在实际应用中，跨域请求还是比较常见的，如何上接口直接支持跨域的访问呢？

demo

场景项目A有个接口用来获取用户列表，现在项目b也有个功能需要加载用户列表。这两个项目在两个域名下，至少端口好不同。使用angularjs中的$http发起请求。

using Newtonsoft.Json;using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Net.Http;using System.Threading.Tasks;using System.Web.Http;namespace API.Controllers{    public class User    {        public int Id { set; get; }        public string Name { set; get; }        public DateTime Dt { set; get; }    }    public class UserController : ApiController    {        // GET: api/User        [HttpGet]        [Route("api/User/lists")]        public HttpResponseMessage Get()        {                HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.NoContent);                List<User> users = new List<User> { new User { Id = 1, Name = "张三", Dt = DateTime.Now },
                                                    new User { Id = 2, Name = "李四", Dt = DateTime.Now } };                response = new HttpResponseMessage(HttpStatusCode.OK) { 
                          Content = new StringContent(JsonConvert.SerializeObject(new { _code = 200, _data = users })) };                return response;        }    }}

首先用postman模拟请求，验证接口是正确的。

现在项目b想通过js来请求这个接口：

$http.get("http://localhost:49505/api/User/lists").success(function (response) { console.log(response); });

结果：

在webapi中为响应头加上允许跨域访问。如下所示

    public class UserController : ApiController    {        // GET: api/User        [HttpGet]        [Route("api/User/lists")]        public HttpResponseMessage Get()        {                HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.NoContent);                List<User> users = new List<User> { new User { Id = 1, Name = "张三", Dt = DateTime.Now }, new User { Id = 2, Name = "李四", Dt = DateTime.Now } };                response = new HttpResponseMessage(HttpStatusCode.OK) { Content = new StringContent(JsonConvert.SerializeObject(new { _code = 200, _data = users })) };                response.Headers.Add("Access-Control-Allow-Origin", "*"); //允许哪些url可以跨域请求到本域                response.Headers.Add("Access-Control-Allow-Methods", "POST"); //允许的请求方法，一般是GET,POST,PUT,DELETE,OPTIONS                response.Headers.Add("Access-Control-Allow-Headers", "x-requested-with,content-type"); //允许哪些请求头可以跨域                return response;        }    }

测试

    $http({        method: 'get',        url: "http://localhost:49505/api/User/lists"    }).success(function (response) { console.log(response); });

结果