WebApi 跨域问题解决方案:CORS

目录

  1. 跨域问题的由来
  2. 跨域问题解决原理
  3. 跨域问题解决细节
  4. 总结

跨域问题的由来

同源策略:出于安全考虑,浏览器会限制脚本中发起的跨站请求,浏览器要求JavaScript或Cookie只能访问同域下的内容。

正是由于这个原因,我们不同项目之间的调用就会被浏览器阻止。比如我们最常见的场景:WebApi作为数据服务层,它是一个单独的项目,我们的MVC项目作为Web的显示层,这个时候我们的MVC里面就需要调用WebApi里面的接口取数据展现在页面上。因为我们的WebApi和MVC是两个不同的项目,所以运行起来之后就存在上面说的跨域的问题。

跨域问题解决原理

CORS全称Cross-Origin Resource Sharing,中文全称跨域资源共享。它解决跨域问题的原理是通过向http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求。比如我们向响应报文里面增加这个Access-Control-Allow-Origin:http://localhost:8081,就表示支持http://localhost:8081里面的所有请求访问系统资源。其他更多的应用我们就不一一列举,可以去网上找找。

跨域问题解决细节

  1. 使用nuget 安装Microsoft.AspNet.Cors
  2. App_Start文件夹下面的WebApiConfig.cs文件配置跨域

config.EnableCors(new EnableCorsAttribute("*", "*", "*") { SupportsCredentials=true});

配置完成后如下所示:

        //配置跨域
        config.EnableCors(new EnableCorsAttribute("*", "*", "*") { SupportsCredentials=true});

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

ps:可以看到IE8、9是部分支持的CORS.所以上面配置不生效.了解更多请移步:https://cnhv.co/17tge

总结

以上就是一个简单的CORS解决WebApi跨域问题的实例,由于博主使用WebApi的时间并不长,所以很多理论观点未必成熟,如果有说的不对的,欢迎指出。博主在此多谢啦。

文章抄自:https://cnhv.co/17tge

(完)