WebApi跨域问题解决方案：CPRS

一、跨域问题的由来

出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求JavaScript或Cookie只能访问同域下的内容。

正是由于这个原因，我们不同项目之间的调用就会被浏览器阻止。比如我们最常见的场景：WebApi作为数据服务层，它是一个单独的项目，我们的MVC项目作为Web的显示层，这个时候我们的MVC里面就需要调用WebApi里面的接口取数据展现在页面上。因为我们的WebApi和MVC是两个不同的项目，所以运行起来之后就存在上面说的跨域的问题。

二、跨域问题解决原理

CORS全称Cross-Origin Resource Sharing，中文全称跨域资源共享。它解决跨域问题的原理是通过向http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求。比如我们向响应报文里面增加这个Access-Control-Allow-Origin:http://localhost:8081，就表示支持http://localhost:8081里面的所有请求访问系统资源。其他更多的应用我们就不一一列举，可以去网上找找。

三、跨域问题解决细节

首先介绍下CORS如何使用，在WebApiCORS项目上面使用Nuget索“microsoft.aspnet.webapi.cors”,安装第一个然后在App_Start文件夹下面的WebApiConfig.cs文件夹配置跨域

    public static class WebApiConfig{public static void Register(HttpConfiguration config){//跨域配置config.EnableCors(new EnableCorsAttribute("*", "*", "*"));// Web API 路由config.MapHttpAttributeRoutes();config.Routes.MapHttpRoute(name: "DefaultApi",routeTemplate: "api/{controller}/{action}/{id}",defaults: new { id = RouteParameter.Optional });}}

我们暂定三个“*”号，当然，在项目中使用的时候一般需要指定对哪个域名可以跨域、跨域的操作有哪些等等。这个在下面介绍。

这个时候又有新问题了，怎么回事呢？我都已经设置跨域了呀，怎么IE8、9还是不行呢？这个时候就有必要说说CORS的浏览器支持问题了。请看下面这张图：

上图描述了CORS的浏览器支持情况，可以看到IE8、9是部分支持的。网上说的解决方案都是Internet Explorer 8 、9使用 XDomainRequest 对象实现CORS。是不是有这么复杂？于是博主各种百度寻找解决方案。最后发现在调用处指定 jQuery.support.cors = true; 这一句就能解决IE8、9的问题了。具体是在Index.js里面

jQuery.support.cors = true;
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 () {}});
});

CORS的具体参数设置

上文我们使用config.EnableCors(new EnableCorsAttribute(““, ““, “*”));
这一句解决了跨域问题，上面说了，这种*号是不安全的。因为它表示只要别人知道了你的请求url，任何请求都可以访问到你的资源。这是相当危险的。所以需要我们做一些配置，限制访问权限。比如我们比较常见的做法如下：

配置方法一、在Web.Config里面（PS：这两张图源自：http://www.cnblogs.com/moretry/p/4154479.html）

然后在WebApiConfig.cs文件的Register方法里面

配置方法二、如果你只想对某一些api做跨域，可以直接在API的类上面使用特性标注即可。

　[EnableCors(origins: "http://localhost:8081/", headers: "*", methods: "GET,POST,PUT,DELETE")]public class ChargingController : ApiController{/// <summary>/// 得到所有数据/// </summary>/// <returns>返回数据</returns>[HttpGet]public string GetAllChargingData(){return "Success";}}

PS:这篇笔记借鉴了http://www.cnblogs.com/landeanfen/p/5177176.html