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

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

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

配置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命名空间引入。
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.Http;
    using System.Web.Http.Cors;

    namespace WebAPI_Swagger
    {
        public static class WebApiConfig
        {
            public static void Register(HttpConfiguration config)
            {

                config.Routes.MapHttpRoute(
                    name: "DefaultApi",
                    routeTemplate: "api/{controller}/{id}",
                    defaults: new { id = RouteParameter.Optional }
                );
            }
            private static void EnableCrossSiteRequests(HttpConfiguration config)
            {
                //对所有的请求来源没有任何限制
                var cors = new EnableCorsAttribute(
                 origins: "*",
                 headers: "*",
                 methods: "*"
                 );
                config.EnableCors(cors);
            }
        }
    }

  1. 在项目的Web.config文件中的system.webServer节点下添加:
    <httpProtocol>
    <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
    </customHeaders>
    </httpProtocol>
  2. 重新编译调试项目,出现错误安全透明方法“System.Web.Http.GlobalConfiguration.get_Configuration()”尝试访问安全关键类型“System.Web.Http.HttpConfiguration”失败。
  3. 错误原因:system.web.http.webhost的版本低引起,system.web.http.webhost的版本是4.0.0.0,需要安装一个高版本的web api。
  4. 使用NuGet安装Microsoft ASP.NET Web API 2.2
    Install-Package Microsoft.AspNet.WebApi -Version 5.2.4
  5. 重新生成解决方案,再次调试成功。
  6. 测试允许跨域访问是否成功
  7. 编写HTML文件:
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
            <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
            <script>
                $.ajax({
                    url: "http://localhost:17693/api/food",//Food就是控制器的名字
                    type: "Get",
                    success: function (obj)
                    {
                        var str = "";
                        str += "<table><tr><td>食物名:</td></tr>";
                        for (var i = 0; i < obj.length; i++)
                        {
                            str += "<tr><td>"+obj[i].FName+"</td></tr>";
                        }
                        str += "</table>";
                        $("#DivFood").html(str);
                    }
                })
            </script>
        </head>
        <body>
            <div>
                <div id="DivFood"></div>
            </div>
        </body>
        </html>
    
  8. 成功访问
feihu分享到:

          

You may also like...

Scroll Up