webapi跨域访问cors

新建mvc和webapi应用程序，对应的域名和端口号分别是：http://localhost:24101/ 和 http://localhost:24159/

在webapi项目的values控制器中添加测试接口GetStatus如下：

namespace WebApiCors.Controllers
{
    [Authorize]
    public class ValuesController : ApiController
    {
        [HttpGet]
        [AllowAnonymous]
        public string GetStatus()
        {
            return "ok";
        }
    }

配置webapi的路由：

namespace WebApiCors
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API 配置和服务
            // 将 Web API 配置为仅使用不记名令牌身份验证。
            config.SuppressDefaultHostAuthentication();
            config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

            // Web API 路由
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

mvc项目修改Home控制器下的Index视图，如下

@{
    ViewBag.Title = "Home Page";
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "http://localhost:24159/api/Values/GetStatus",
            type: "Get",
            data: {},
            success: function (data) {
                console.log(data)
            },
            error: function () {
                console.log("fail")
            }
        });
    });
</script>

同时启动两个应用程序：右键解决方案-->属性-->启动多个项目，启动之后发现mvc项目报错，报错信息如下，这是因为浏览器为了安全考虑，默认是不允许跨域访问，当然不同浏览器以及相同浏览器不同版本可能不一样。

下面我们对webapi应用程序做一下跨域访问改造，使用nuget添加跨域相关引用，搜索“microsoft.aspnet.webapi.cors”，选择第一个

然后在WebApiConfig配置跨域访问：

namespace WebApiCors
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            //配置跨域访问
            config.EnableCors(new EnableCorsAttribute("http://localhost:24101", "*","*"));


            // Web API 配置和服务
            // 将 Web API 配置为仅使用不记名令牌身份验证。
            config.SuppressDefaultHostAuthentication();
            config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

            // Web API 路由
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

再次同时访问两个应用程序，发现mvc项目能够访问到webapi接口了。

参考文章：https://www.cnblogs.com/landeanfen/p/5177176.html

猜你喜欢