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

?ASP.NET MVC项目跨域

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

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

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

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

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

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

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

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

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

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