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); });

結果