正文
前言：上篇总结了下WebApi的接口测试工具的使用，这篇接着来看看WebAPI的另一个常见问题：跨域问题。本篇主要从实例的角度分享下CORS解决跨域问题一些细节。
WebApi系列文章
一、跨域问题的由来同源策略：出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求JavaScript或Cookie只能访问同域下的内容。
正是由于这个原因，我们不同项目之间的调用就会被浏览器阻止。比如我们最常见的场景：WebApi作为数据服务层，它是一个单独的项目，我们的MVC项目作为Web的显示层，这个时候我们的MVC里面就需要调用WebApi里面的接口取数据展现在页面上。因为我们的WebApi和MVC是两个不同的项目，所以运行起来之后就存在上面说的跨域的问题。
二、跨域问题解决原理CORS全称Cross-Origin Resource Sharing，中文全称跨域资源共享。它解决跨域问题的原理是通过向http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求。比如我们向响应报文里面增加这个Access-Control-Allow-Origin::8081，就表示支持:8081里面的所有请求访问系统资源。其他更多的应用我们就不一一列举，可以去网上找找。
三、跨域问题解决细节下面我就结合一个简单的实例来说明下如何使用CORS解决WebApi的跨域问题。
1、场景描述我们新建两个项目，一个WebApi项目（下图中WebApiCORS），一个MVC项目（下图中Web）。WebApi项目负责提供接口服务，MVC项目负责页面呈现。如下：
其中，Web与WebApiCORS端口号分别为“27239”和“27221”。Web项目需要从WebApiCORSS项目里面取数据，很显然，两个项目端口不同，所以并不同源，如果使用常规的调用方法肯定存在一个跨域的问题。
简单介绍下测试代码，Web里面有一个HomeController
public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } }
对应的Index.cshtml
<html> <head> <meta content="width=device-width" /> <title>Index</title> <script src="http://www.mamicode.com/~/Content/jquery-1.9.1.js"></script> <link href="http://www.mamicode.com/~/Content/bootstrap/css/bootstrap.css" /> <script src="http://www.mamicode.com/~/Content/bootstrap/js/bootstrap.js"></script> <script src="http://www.mamicode.com/~/Scripts/Home/Index.js"></script> </head> <body> 测试结果：<div> </div> </body> </html>
Index.js文件
var ApiUrl = "http://localhost:27221/"; $(function () { $.ajax({ type: "get", url: ApiUrl + "api/Charging/GetAllChargingData", data: {}, success: function (data, status) { if (status == "success") { $("#div_test").html(data); } }, error: function (e) { $("#div_test").html("Error"); }, complete: function () { } }); });
WebApiCORS项目里面有一个测试的WebApi服务ChargingController
public class ChargingController : ApiController { /// <summary> /// 得到所有数据 /// </summary> /// <returns>返回数据</returns> [HttpGet] public string GetAllChargingData() { return "Success"; } }
配置WebApi的路由规则为通过action调用。WebApiConfig.cs文件
public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API 路由 config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); } } 2、场景测试 1）我们不做任何的处理，直接将两个项目运行起来。看效果如何
IE浏览器：
谷歌浏览器：
