首先我们来看一个例子
1.创建一个MVC项目取名为MVC用于数据展示
2.创建一个WEBAPI项目取名为WEBAPI用于提供MVC项目数据接口
3.MVC里面有一个HomeController控制器里面有个Index方法，这是MVC默认起始方法，我们就用这个方法进行示例
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
在母版页（Views/Shared/_Layout.cshtml）中引用JS和CSS
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
Index前端界面：
<script type="text/javascript">
var ApiUrl = "http://localhost:53268/"; //这里的端口是根据自己WEBAPI运行时的端口
$(function () {
$.ajax({
type: "get",
url: ApiUrl + "api/User",
data: {},
success: function (data, status) {
if (status == "success") {
$("#div_test").html(data);
}
},
error: function (e) {
$("#div_test").html("Error");
},
complete: function () {
}
});
});
</script>
测试结果：<div id="div_test">
</div>
4.在WEBAPI项目中创建一个API控制器名UserController并写一个Index方法
public class UserController : ApiController
{
[HttpGet]
public string index()
{
return "链接成功";
}
}
运行MVC项目看看会发生什么。
请求接口获取数据失败。
为什么会失败，下面进入我们今天的正题。
1.什么叫跨域
刚刚我们用例子介绍了一下什么是跨域
跨域：浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.
通俗简单来讲：跨域就是域名不同或者端口不同或者协议不同，就叫做跨域
我们上面的例子是在本地运行的，域名是本地localhost,但是因为是不同的两个项目，所以系统在分配时会分配两个不同的端口，这是一种跨域。
WEBAPI是一种基于HTTP协议的服务，是提供数据接口的服务，所以在编写WEBAPI项目时跨域是必不可少的。
2.如何使用CORS解决跨域问题
CORS:全称Cross-Origin Resource Sharing，中文全称跨域资源共享。它解决跨域问题的原理是通过向http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求.
下面介绍如何使用CORS：
1.在WEBAPI上面使用Nuget搜索"microsoft.aspnet.webapi.cors"并安装
2.在App_Start文件下的WEBAPI路由配置文件（WebApiConfig.cs）配置跨域
引用命名空间using System.Web.Http.Cors，并添加以下代码：
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
// Configure Web API to use only bearer token authentication.
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
// Web API routes
config.MapHttpAttributeRoutes();
//跨域配置
config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
引用完CORS后，我们再回过头来运行MVC项目看是否能请求到数据
请求成功
3.CORS的介绍
浅谈CORS的配置参数
1.Origins:配置允许访问的域名，多个域名以逗号隔开即可，域名一定要完整，如果是ip地址前面要加上“HTTP”,只使用IP的话一定会失效的
2.headers:配置所支持的资源
3.methods:配置支持的方法,Get,Post,Put等
4.三个参数都是String类型
若使用了CORS还无法做到跨域请求数据，有可能是因为浏览器不支持，在请求之前加上jQuery.support.cors = true;
<script type="text/javascript">
jQuery.support.cors = true;
var ApiUrl = "http://localhost:53268/"; //这里的端口是根据自己WEBAPI运行时的端口
$(function () {
$.ajax({
type: "get",
url: ApiUrl + "api/User",
data: {},
success: function (data, status) {
if (status == "success") {
$("#div_test").html(data);
}
},
error: function (e) {
$("#div_test").html("Error");
},
complete: function () {
}
});
});
</script>
四.CORS的扩展
这种*号是不安全的。因为它表示只要别人知道了你的请求url，任何请求都可以访问到你的资源。这是相当危险的。所以需要我们做一些配置，限制访问权限。比如我们比较常见的做法如下：
方法一：
1.在Web.Confin配置文件中的appSetting节点下添加三个参数的获取
<appSettings>
<add key="cors:allowdMethods" value="http://www.cnblogs.com,https://www.baidu.com"/>
<add key="cors:allowdOrigin" value="*"/>
<add key="cors:allowdHeaders" value="Get"/>
</appSettings>
2.然后在WebApiConfig.cs文件的Register方法里面
//跨域配置
var Methods = ConfigurationManager.AppSettings["cors:allowdMethods"];
var Origin = ConfigurationManager.AppSettings["cors:allowdOrigin"];
var Headers = ConfigurationManager.AppSettings["cors:allowdHeaders"];
var geduCors = new EnableCorsAttribute(Methods, Origin, Headers);
config.EnableCors(geduCors);
方法二：
如果你只想对某一些api做跨域，可以直接在API的类上面使用特性标注即可。
[EnableCors(origins: "http://www.cnblogs.com,https://www.baidu.com", headers: "*", methods: "GET,POST,PUT,DELETE")]
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Title = "Home Page";
return View();
}
}
五.总结