前言:上篇总结了下之前的接口测试工具的使用,这篇接着来看看之前的另一个常见问题:跨域问题。本篇主要从实例的角度分享下歌珥解决跨域问题一些细节。
同源策略:出于安全考虑,浏览器会限制脚本中发起的跨站请求,浏览器要求JavaScript或Cookie只能访问同域下的内容。
正是由于这个原因,我们不同项目之间的调用就会被浏览器阻止。比如我们最常见的场景:WebApi作为数据服务层,它是一个单独的项目,我们的MVC项目作为Web的显示层,这个时候我们的MVC里面就需要调用WebApi里面的接口取数据展现在页面上。因为我们的WebApi和MVC是两个不同的项目,所以运行起来之后就存在上面说的跨域的问题。
歌珥全称跨源资源共享、中文全称跨域资源共享。它解决跨域问题的原理是通过向http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求。比如我们向响应报文里面增加这个Access-Control-Allow-Origin: http://localhost: 8081年,就表示支持http://localhost: 8081里面的所有请求访问系统资源。其他更多的应用我们就不一一列举,可以去网上找找。
下面我就结合一个简单的实例来说明下如何使用歌珥解决WebApi的跨域问题。
<强> 1场景描述
我们新建两个项目,一个WebApi项目(下图中WebApiCORS),一个MVC项目(下图中Web) .WebApi项目负责提供接口服务,MVC项目负责页面呈现。如下:
其中,网络与WebApiCORS端口号分别为“27239”和了对“27221”Web这类项目需要从WebApiCORSS项目里面取数据,很显然,两个项目端口不同,所以并不同源,如果使用常规的调用方法肯定存在一个跨域的问题。
简单介绍下测试代码,网络里面有一个HomeController
公共类HomeController:控制器
{//得到:回家
公共ActionResult指数()
{
返回视图();
}
}
对应的Index.cshtml
& lt; html>
& lt; head>
& lt; meta name=" viewport "内容=翱矶?设备宽度”/比;
& lt; title> Index
& lt;脚本src=" https://www.yisu.com/zixun/~/内容/jquery-1.9.1.js”祝辞& lt;/script>
& lt;链接的href=" https://www.yisu.com/zixun/~/内容/引导/css/bootstrap.css”rel=巴獠縩ofollow”rel="样式表"/比;
& lt;脚本src=" https://www.yisu.com/zixun/~/内容/引导/js/bootstrap.js”祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/~/脚本/Home/Index.js”祝辞& lt;/script>
& lt;/head>
& lt; body>
测试结果:& lt; div id=癲iv_test”比;
& lt;/div>
& lt;/body>
& lt;/html>
Index.js文件
var ApiUrl=" http://localhost: 27221/?
$(函数(){
. ajax({美元
类型:“获得”,
url: ApiUrl +“api/充电/GetAllChargingData”,
数据:{},
成功:函数(数据、状态){
如果(状态==俺晒Α?{
$ (" # div_test ") . html(数据);
}
},
错误:函数(e) {
$ (" # div_test ") . html(“错误”);
},
完成:函数(){
}
});
});
WebApiCORS项目里面有一个测试的WebApi服务ChargingController
公开课ChargingController: ApiController
{///& lt; summary>///得到所有数据///& lt;/summary>///& lt; returns>返回数据& lt;/returns>
(HttpGet)
公共字符串GetAllChargingData ()
{
返回“成功”;
}
}
配置WebApi的路由规则为通过行动调用.WebApiConfig.cs文件
公共静态类WebApiConfig
{
公共静态无效注册(HttpConfiguration配置)
{//Web API路由
config.MapHttpAttributeRoutes ();
config.Routes.MapHttpRoute (
名称:“DefaultApi”,
routeTemplate:“api/{控制器}/{行动}/{id}”,
默认值:新{id=RouteParameter。可选}
);
}
}
<强> 2场景测试
1)我们不做任何的处理,直接将两个项目运行起来。看效果如何
IE浏览器:
