title: ASP.NET WebAPI允许跨域访问配置踩坑记
date: 2019-03-01 00:00:00
categories:

  • 后端
    tags:
  • ASP.NET
  • WebAPI
  • RESTful

没有设置服务端允许跨域访问之前

  1. API服务器地址http://localhost:17693/api/food
  2. 在本地新建一个HTML，采用jQuery Ajax获取跨域获取数据，结果如下：

ASP.NET WebAPI允许跨域访问配置踩坑记 - 图1

配置ASP.NET Web API允许跨域访问

  1. API所在项目使用NuGet安装Microsoft.AspNet.WebApi.Cors，打开vs的NuGet控制台，执行命令Install-Package Microsoft.AspNet.WebApi.Cors
  2. 修改WebApiConfig.cs文件的配置：在WebApiConfig类中添加方法EnableCrossSiteRequests，同时不要忘了将System.Web.Http.Cors命名空间引入。
  1.     using System;
  2.     using System.Collections.Generic;
  3.     using System.Linq;
  4.     using System.Web.Http;
  5.     using System.Web.Http.Cors;
  7.     namespace WebAPI_Swagger
  8.     {
  9.         public static class WebApiConfig
  10.         {
  11.             public static void Register(HttpConfiguration config)
  12.             {
  14.                 config.Routes.MapHttpRoute(
  15.                     name: "DefaultApi",
  16.                     routeTemplate: "api/{controller}/{id}",
  17.                     defaults: new { id = RouteParameter.Optional }
  18.                 );
  19.             }
  20.             private static void EnableCrossSiteRequests(HttpConfiguration config)
  21.             {
  22.                 //对所有的请求来源没有任何限制
  23.                 var cors = new EnableCorsAttribute(
  24.                  origins: "*",
  25.                  headers: "*",
  26.                  methods: "*"
  27.                  );
  28.                 config.EnableCors(cors);
  29.             }
  30.         }
  31.     }
  1. 在项目的Web.config文件中的system.webServer节点下添加：```c 
    1.  <customHeaders>
    2.  <add name="Access-Control-Allow-Origin" value="*" />
    3.  <add name="Access-Control-Allow-Headers" value="*" />
    4.  <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
    5.  </customHeaders>
     ```
  1. 4. 重新编译调试项目，出现错误`安全透明方法“System.Web.Http.GlobalConfiguration.get_Configuration()”尝试访问安全关键类型“System.Web.Http.HttpConfiguration”失败。`
  2. [![](https://images.fengjiaheng.top/images/20180429/02.png)](https://images.fengjiaheng.top/images/20180429/02.png)
  3. 5. 错误原因：system.web.http.webhost的版本低引起，system.web.http.webhost的版本是4.0.0.0，需要安装一个高版本的web api。
  4. 6. 使用NuGet安装`Microsoft ASP.NET Web API 2.2`：
  5. `Install-Package Microsoft.AspNet.WebApi -Version 5.2.4`
  6. 7. 重新生成解决方案，再次调试成功。
  7. 8. 测试允许跨域访问是否成功
  8. 9. 编写HTML文件：
  10.     ``` C#
  11.         <!DOCTYPE html>
  12.         <html lang="en">
  13.         <head>
  14.             <meta charset="UTF-8">
  15.             <meta name="viewport" content="width=device-width, initial-scale=1.0">
  16.             <meta http-equiv="X-UA-Compatible" content="ie=edge">
  17.             <title>Document</title>
  18.             <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  19.             <script>
  20.                 $.ajax({
  21.                     url: "http://localhost:17693/api/food",//Food就是控制器的名字
  22.                     type: "Get",
  23.                     success: function (obj)
  24.                     {
  25.                         var str = "";
  26.                         str += "<table><tr><td>食物名：</td></tr>";
  27.                         for (var i = 0; i < obj.length; i++)
  28.                         {
  29.                             str += "<tr><td>"+obj[i].FName+"</td></tr>";
  30.                         }
  31.                         str += "</table>";
  32.                         $("#DivFood").html(str);
  33.                     }
  34.                 })
  35.             </script>
  36.         </head>
  37.         <body>
  38.             <div>
  39.                 <div id="DivFood"></div>
  40.             </div>
  41.         </body>
  42.         </html>
  1. 成功访问 ASP.NET WebAPI允许跨域访问配置踩坑记 - 图2 ```