11.24 ASP.NET实战007:MVC解决跨域请求问题详解

前面刚说到Vue实战057:前端解决跨域问题详解,今天顺便把ASP.NET MVC的跨域解决方案也分享下。什么是跨域问题这里就不在复述了,前面已经解释了很多次了,需要了解的可以参考Vue实战057:前端解决跨域问题详解,这里主要说下在ASP.NET MVC中如何解决跨域请求问题。

ASP.NET实战007:MVC解决跨域请求问题详解

​ASP.NET MVC项目跨域

ASP.NET MVC是Microsoft在WebForm框架的基础上改进的一款Web开发框架,通过把项目分成Model、View和Controller几个模块将业务逻辑、数据、界面显示等代码进行组织分离,降低彼此间的耦合度,从而使系统更加灵活,易于扩展,也大大提高代码的可重用性和开发效率。在ASP.NET MVC项目下我们也可以实现前后端分离项目,在Controller控制器中必须返回ActionResult类型,默认返回ViewResult视图结果并将视图呈现给网页显示。但是我们只希望其作为后台接口为Vue提供后台服务,这里们就可以屏蔽掉返回ActionResult类型的方法,改用JsonResult等返回类型。

ASP.NET实战007:MVC解决跨域请求问题详解

ASP.NET MVC常见的ActionResult衍生类型主要有:JsonResult(返回JSON格式内容)、FileResult(返回文件)、FilePathResult(返回文件路径)、FileStreamResult(返回流文件)、EmptyResult(返回空值)、ContentResult(返回文本内容)、RedirectResult(重定向URL)、ViewResult(返回视图)、JavaScriptResult(返回JavaScript代码)等等,比如说我们用JsonResult定义一个简单的用户名和密码验证的接口(这里没有做数据库验证)。

ASP.NET实战007:MVC解决跨域请求问题详解

前端这里用Vue之前写好的项目来测试,这里我封装了axios和api接口定义所以写法可能不一样。这里需要注意的是ASP.NET MVC启动的是http://localhost:56627/,所以在配置axios.defaults.baseURL属性的时候要注意下,别写成了"协议+IP+端口"形式这样是访问不到ASP.NET MVC后台的。

ASP.NET实战007:MVC解决跨域请求问题详解

接下来我们就要配置跨域访问了,不然前端是无法访问到我们的Login方法。ASP.NET MVC配置跨域最简单的方法就是在Web.config文件中添加应用程序配置,在configuration中添加如下配置前台即可跨域访问到网站数据。Access-Control-Allow-Origin设置为*表示允许所有域名,如要设置特定的域名,可以填写具体域名。

ASP.NET实战007:MVC解决跨域请求问题详解

如果你想实现指定Controller或Action允许跨域访问,那么我们就可以在App_Start封装一个跨域类AllowOrigin,获取当前请求的源地址,并指定该地址添加Access-Control-Allow-Origin属性,再分别定义两个针对Controller或Action定义属性的类,当其被指定需跨域时调用AllowOrigin中的addOrigin方法为其添加Access-Control-Allow-Origin属性。

ASP.NET实战007:MVC解决跨域请求问题详解

如何在指定的位置配置允许跨域访问,引入using WebApplication3.App_Start;在需要允许跨域的Controller前添加[ControllerAllowOrigin(AllowSites = new string[] { "http://localhost:1527" })],在需要允许跨域的Action前添加[ActionAllowOrigin(AllowSites = new string[] { "http://localhost:1527" })]即可。

ASP.NET实战007:MVC解决跨域请求问题详解

ASP.NET Web API项目跨域

Web API是一款借鉴了RESTful风格的轻型框架,用于构建基于 HTTP 的服务,它与 ASP.NET MVC应用程序的工作方式大致相同,直接返回用户的数据请求而不是视图。Web API提供了针对其跨域设置的插件:Microsoft.AspNet.WebApi.Cors。在工具->NuGet包管理器->管理解决方案的NuGet程序包中搜索下载插件Microsoft.AspNet.WebApi.Cors,或者在工具->NuGet包管理器->程序包管理器控制台窗口中输入命令:Install-Package Microsoft.AspNet.WebApi.Cors安装最新的包和更新相关的依赖项。

ASP.NET实战007:MVC解决跨域请求问题详解

ASP.NET Web API在App_Start 目录下提供了WebApiConfig.cs配置文件,我们在WebApiConfig.cs文件中的Register方法中添加跨域配置:config.EnableCors(new EnableCorsAttribute("*", "*", "*"));就可以实现全局跨域配置了,如果你想在每个Controller或Action启用CORS就可以只启用跨域功能config.EnableCors(),具体的跨域配置可以在指定的Controller或Action中配置。

ASP.NET实战007:MVC解决跨域请求问题详解

然后我们在控制器中添加EnableCors属性来针对每个Controller或者每个Action进行跨域访问配置,如果您设置EnableCors属性在Controller控制器,那么该控制器下的所有Action都支持跨域。如果想对某一个Action禁用跨域,可以使用[DisableCors]特性类屏蔽。如果你设置EnableCors属性在Controller上则只有该方法允许跨域(需引入空间名:using System.Web.Http.Cors;)。

ASP.NET实战007:MVC解决跨域请求问题详解

注意事项:该方法中的Controller继承至ApiController而非Controller,Microsoft.AspNet.WebApi.Cors是针对继承ApiController的控制器生效,对继承Controller的控制器无效!

更多ASP.NET实战实战技巧可参考专栏:ASP.NET MVC实战系列


分享到:


相關文章: