webapi使用System.Web.Http.Cors配置跨域

前端调用后台API 错误：CORS 头缺少 'Access-Control-Allow-Origin

System.Web.Http.Cors配置跨域访问的两种方式

　　使用System.Web.Http.Cors配置跨域访问，众多大神已经发布了很多文章，我就不在详细描述了，作为小白我只说一下自己的使用心得。在webapi中使用System.Web.Http.Cors配置跨域信息可以有两种方式。 
　　一种是在App_Start.WebApiConfig.cs的Register中配置如下代码，这种方式将在所有的webapi Controller里面起作用。

<code class="language-C# hljs cs has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">using</span> System;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">using</span> System.Collections.Generic;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">using</span> System.Linq;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">using</span> System.Web.Http;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">using</span> System.Web.Http.Cors;namespace YDTG.Service{    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> WebApiConfig    {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">Register</span>(HttpConfiguration config)        {            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Web API 配置和服务</span>            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Web API 路由</span>            config.MapHttpAttributeRoutes();            config.Routes.MapHttpRoute(                name: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"DefaultApi"</span>,                routeTemplate: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"api/{controller}/{action}/{id}"</span>,                defaults: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> { id = RouteParameter.Optional }            );            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这是重点，从配置文件的appsettings节点中读取跨域的地址</span>            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> cors = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> EnableCorsAttribute(ConfigurationManager.AppSettings[<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"origins"</span>], <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"*"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"*"</span>);            config.EnableCors(cors);        }    }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li></ul>

配置文件如下，注意一定要加上http

<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">add</span> key=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"origins"</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">value</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://localhost:9012,http://192.168.1.108:9012"</span> /></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

　　第二种方式就是在每个webapiController类中设置，即每个控制器个性化配置，如下代码。

<code class="language-C# hljs cs has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">using</span> System;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">using</span> System.Collections.Generic;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">using</span> System.Linq;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">using</span> System.Web;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">using</span> System.Web.Http.Cors;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">using</span> System.Web.Mvc;namespace Service.Controllers{   [EnableCors("*", "*", "*")]    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> HomeController : ApiController    {       public async Task<HttpResponseMessage> LoadReferralMessage(int doctorPatientShipId)        {           <span style="color: rgb(51, 51, 51); font-family: "Source Code Pro", monospace; font-size: 14px; white-space: pre; background-color: rgba(128, 128, 128, 0.0470588);">var</span><span style="color: rgb(51, 51, 51); font-family: "Source Code Pro", monospace; font-size: 14px; white-space: pre; background-color: rgba(128, 128, 128, 0.0470588);"> result = new List<ReferralMessageAlertDisplayDto>();</span><br style="color: rgb(51, 51, 51); font-family: "Source Code Pro", monospace; font-size: 14px; white-space: pre; background-color: rgba(128, 128, 128, 0.0470588);" /><span style="color: rgb(51, 51, 51); font-family: "Source Code Pro", monospace; font-size: 14px; white-space: pre; background-color: rgba(128, 128, 128, 0.0470588);">                    if (haHealthReferralMessageAlert != null)</span><br style="color: rgb(51, 51, 51); font-family: "Source Code Pro", monospace; font-size: 14px; white-space: pre; background-color: rgba(128, 128, 128, 0.0470588);" /><span style="color: rgb(51, 51, 51); font-family: "Source Code Pro", monospace; font-size: 14px; white-space: pre; background-color: rgba(128, 128, 128, 0.0470588);">                    {</span><br style="color: rgb(51, 51, 51); font-family: "Source Code Pro", monospace; font-size: 14px; white-space: pre; background-color: rgba(128, 128, 128, 0.0470588);" /><span style="color: rgb(51, 51, 51); font-family: "Source Code Pro", monospace; font-size: 14px; white-space: pre; background-color: rgba(128, 128, 128, 0.0470588);">                        result = new ReferralMessageAlertDisplayDtoBuilder().BuildMany(haHealthReferralMessageAlert);</span><br style="color: rgb(51, 51, 51); font-family: "Source Code Pro", monospace; font-size: 14px; white-space: pre; background-color: rgba(128, 128, 128, 0.0470588);" /><span style="color: rgb(51, 51, 51); font-family: "Source Code Pro", monospace; font-size: 14px; white-space: pre; background-color: rgba(128, 128, 128, 0.0470588);">                    }</span><br style="color: rgb(51, 51, 51); font-family: "Source Code Pro", monospace; font-size: 14px; white-space: pre; background-color: rgba(128, 128, 128, 0.0470588);" /><span style="color: rgb(51, 51, 51); font-family: "Source Code Pro", monospace; font-size: 14px; white-space: pre; background-color: rgba(128, 128, 128, 0.0470588);">                    return Request.CreateResponse(HttpStatusCode.OK, result, "application/json");</span>        }    }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul>

注意事项

1. EnableCors共三个参数分别为origins、headers和methods。origins配置允许访问的域名，多个域名以逗号分隔即可，域名一定要完整，如果是ip地址前面要加上“http”，只使用IP的话一定会失效的。参数headers配置所支持的资源。参数methods配置支持的方法，get、post、put等。如果允许任意域名、任意资源、任意方法访问自己的webapi，则三个参数全部使用星号”*”即可。
2. “EnableCors(“http://localhost:9012,http://192.168.1.108:9012“, ““, ““)”中的配置如果出现错误的话不会报错，而是直接禁止未出现在配置表中的资源访问。
3. 如果使用第一种方式那么可以从配置文件中读取网站列表，如果使用第二种方式，所有的参数只能使用常量。

文章出处：

http://blog.csdn.net/chaoyangzhixue/article/details/52251322