JavaScript 跨域访问的问题和解决过程
受浏览器的同源策略限制，JavaSript只能请求本域内的资源。跨域资源共享(Cross-Origin Resource Sharing, CORS)是为解决Ajax技术难实现跨域问题而提出的一个规范，这个规范试着从根本上解决安全的跨域资源共享问题。在此之前，解决此类问题的途径往往是服务器代理、JSONP等，治标不治本。目前基本所有浏览器都已经支持该规范。
一个域是由schema、host、port三者共同组成，与路径无关。所谓跨域，是指在http://example-foo.com/域上通过XMLHttpRequest对象调用http://example-bar.com/域上的资源。CORS约定服务器端和浏览器在HTTP协议之上，通过一些额外HTTP头部信息，进行跨域资源共享的协商。服务器端和浏览器都必需遵循规范中的要求。
CORS把HTTP请求分成两类，不同类别按不同的策略进行跨域资源共享协商。
1. 简单跨域请求。
当HTTP请求出现以下两种情况时，浏览器认为是简单跨域请求：
1). 请求方法是GET、HEAD或者POST，并且当请求方法是POST时，Content-Type必须是application/x-www-form-urlencoded, multipart/form-data或着text/plain中的一个值。
2). 请求中没有自定义HTTP头部。
对于简单跨域请求，浏览器要做的就是在HTTP请求中添加Origin Header，将JavaScript脚本所在域填充进去，向其他域的服务器请求资源。服务器端收到一个简单跨域请求后，根据资源权限配置，在响应头中添加Access-Control-Allow-Origin Header。浏览器收到响应后，查看Access-Control-Allow-Origin Header，如果当前域已经得到授权，则将结果返回给JavaScript。否则浏览器忽略此次响应。
2. 带预检(Preflighted)的跨域请求。
当HTTP请求出现以下两种情况时，浏览器认为是带预检(Preflighted)的跨域请求：
1). 除GET、HEAD和POST(only with application/x-www-form-urlencoded, multipart/form-data, text/plain Content-Type)以外的其他HTTP方法。
2). 请求中出现自定义HTTP头部。
带预检(Preflighted)的跨域请求需要浏览器在发送真实HTTP请求之前先发送一个OPTIONS的预检请求，检测服务器端是否支持真实请求进行跨域资源访问，真实请求的信息在OPTIONS请求中通过Access-Control-Request-Method Header和Access-Control-Request-Headers Header描述，此外与简单跨域请求一样，浏览器也会添加Origin Header。服务器端接到预检请求后，根据资源权限配置，在响应头中放入Access-Control-Allow-Origin Header、Access-Control-Allow-Methods和Access-Control-Allow-Headers Header，分别表示允许跨域资源请求的域、请求方法和请求头。此外，服务器端还可以加入Access-Control-Max-Age Header，允许浏览器在指定时间内，无需再发送预检请求进行协商，直接用本次协商结果即可。浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。这个过程对真实请求的调用者来说是透明的。
XMLHttpRequest支持通过withCredentials属性实现在跨域请求携带身份信息(Credential，例如Cookie或者HTTP认证信息)。浏览器将携带Cookie Header的请求发送到服务器端后，如果服务器没有响应Access-Control-Allow-Credentials Header，那么浏览器会忽略掉这次响应。
这里讨论的HTTP请求是指由Ajax XMLHttpRequest对象发起的，所有的CORS HTTP请求头都可由浏览器填充，无需在XMLHttpRequest对象中设置。以下是CORS协议规定的HTTP头，用来进行浏览器发起跨域资源请求时进行协商：
1. Origin。HTTP请求头，任何涉及CORS的请求都必需携带。
2. Access-Control-Request-Method。HTTP请求头，在带预检(Preflighted)的跨域请求中用来表示真实请求的方法。
3. Access-Control-Request-Headers。HTTP请求头，在带预检(Preflighted)的跨域请求中用来表示真实请求的自定义Header列表。
4. Access-Control-Allow-Origin。HTTP响应头，指定服务器端允许进行跨域资源访问的来源域。可以用通配符*表示允许任何域的JavaScript访问资源，但是在响应一个携带身份信息(Credential)的HTTP请求时，Access-Control-Allow-Origin必需指定具体的域，不能用通配符。
5. Access-Control-Allow-Methods。HTTP响应头，指定服务器允许进行跨域资源访问的请求方法列表，一般用在响应预检请求上。
6. Access-Control-Allow-Headers。HTTP响应头，指定服务器允许进行跨域资源访问的请求头列表，一般用在响应预检请求上。
7. Access-Control-Max-Age。HTTP响应头，用在响应预检请求上，表示本次预检响应的有效时间。在此时间内，浏览器都可以根据此次协商结果决定是否有必要直接发送真实请求，而无需再次发送预检请求。
8. Access-Control-Allow-Credentials。HTTP响应头，凡是浏览器请求中携带了身份信息，而响应头中没有返回Access-Control-Allow-Credentials: true的，浏览器都会忽略此次响应。
总结：只要是带自定义header的跨域请求，在发送真实请求前都会先发送OPTIONS请求，浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。所以复杂请求肯定会两次请求服务端。
二、代码操作
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求，正确设置 JavaScript端需要设置的headers信息 方能实现。
1.第一步 服务端设置响应头,在webapi的web.config做如下设置
2.第二部 了解IE chrome 等浏览器 对于 跨域请求并要求设置Headers自定义参数的时候的 "预请求" 就是如果遇到 跨域并设置headers的请求，所有请求需要两步完成！
A 第一步：发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应 一般使用202响应即可 不用返回任何内容信息。（能看到这份手稿的人，本人不相信你后台处理不了一个options请求）options请求可在权限拦截器中处理
////// 权限拦截器 /// public class ApiAuthorizeAttribute : AuthorizeAttribute { public override void OnAuthorization(HttpActionContext actionContext) { if (actionContext.Request.Method == HttpMethod.Options) { actionContext.Response = actionContext.Request.CreateResponse(HttpStatusCode.Accepted); return; } } }
B 第二步：服务器accepted 第一步请求后 浏览器自动执行第二步 发送真正的请求。
客户端代码：
$("#btnSumit").click(function () {
var Ticket = $.cookie("token");
var model = {
id: 1
};
$.ajax({
type: "POST",
url: "http://localhost:65312/api/products/FindProductById",
data: JSON.stringify(model),
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function (xhr) {
// //发送ajax请求之前向http的head里面加入验证信息
xhr.setRequestHeader("token", Ticket); // 请求发起前在头部附加token
},
success: function (data, status) {
if (data.statuscode == "401") {
alert(data.msg);
}
else
{
alert(JSON.stringify(data))
}
},
//error: function (XMLHttpRequest, textStatus, errorThrown) {
// alert(XMLHttpRequest.status);
// alert(XMLHttpRequest.readyState);
// alert(textStatus);
//},
complete: function () {
}
});
});
三、可能遇到的问题
1.原本的代码很简单。。如果是同域名什么问题都没有 （有兴趣的朋友可以尝试在自己的服务器上运行以下代码）
$.ajax({
url: "http://www.google.com/", //不同域名，而且google 没有允许第三方提交所以会出错
cache: false,
//data: params,
dataType: 'json',
success: function (data) {
console.log(data);
},
error: function (e) {
alert(e.statusText);
}
})
嗯，我的默认浏览器是Chrome， 上去一跑。。。当然不能用。。。什么都还没做呢，就想做跨域访问这么危险的事情
下面是Chrome给出的错误提示
2.在服务器端做点手脚，
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); // 可以设置为详细的地址
3. 好了现在Chrome中的Get已经可以运行了，依葫芦画瓢开发了Post方法。。。。发现Post不能用。。。。- -# 真是不顺利啊
在Fiddler中发现客户端提交的是OPTIONS的请求。。。。恩。。。。。那就加一段逻辑处理OPTIONS
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); // 可以设置为详细的地址 if (HttpContext.Current.Request.HttpMethod == "OPTIONS") // 加点逻辑 { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS"); HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept,X-Requested-With"); HttpContext.Current.Response.End(); }
实际运行中有两次请求 第一次是OPTIONS 第二次才是POST
4.还有问题。。。。忽然发现在IE8和IE9中无法运行，而在其他的浏览器中都正常（opera未测试，google说这个浏览器也有问题。不过这东西比较小众）
使用Fiddler发现 这个动作根本没有被提交到服务器端。。。。
经常Google以后发现。。。。IE8以上的版本跨域提交需要使用XDomainRequest 对象。。。。（IE 为什么每次你都这么另类！，jQuery你为什么不兼容ie8和ie9的跨域提交功能。。加点代码很麻烦么！！！）
var xdr = new XDomainRequest(); xdr.onload = function (e) { var data = $.parseJSON(xdr.responseText); if (data == null || typeof (data) == 'undefined') { data = $.parseJSON(data.firstChild.textContent); } //success }; xdr.onerror = function (e) { //error } xdr.open("GET", url); xdr.send();
关于 XDomainRequest 请在这里查看详细，http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx
5.恩 get功能在ie中也可以了。。。不错不错， POST还不行。。。莫非又是IE的问题？？ 这。。怎么每个功能都这么多问题？
奇怪的是Fiddler中显示IE8 中POST请求确实发出去了啊。。。怎么回事？？
把问题分解来看，吧fiddler获取的http request raw数据拿出来 单独提交试试。。。也不行？！ 服务器返回415。。。 看来好像不是ie的问题。（这次冤枉了它了）
仔细排查，发现缺少Content-Type（Content-Type其实不是必须的，参考RFC）
这坑爹的WCF 3.5啊， 不传Content Type就给我报415异常 （WCF 4.0已经解决这个问题，3.5解决起来很麻烦，我一怒之下用了普通的ashx来处理）
.....嗯。。。少什么我加什么。。。 what?!!! XDomainRequest 不能随便设置header，
var xdr=new XDomainRequest (); xdr.contentType="application/json"; //异常。。。。。。。 xdr.contentType = "text/plain"; //这是唯一可以设置的值。。。。MS。。。我要json不要这个。。。。
好吧javascript这边设置失败了。。只能去服务器动手脚。。。想死的心都有了。。。。做点功能怎么这么麻烦。。。
到此为止，总算告一个段落了。。。
附录1
用来解决跨域问题的，服务器端代码
public class Global : System.Web.HttpApplication { protected void Application_BeginRequest(object sender, EventArgs e) { if (HttpContext.Current != null && HttpContext.Current.Response != null) { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); // take care if (HttpContext.Current.Request.HttpMethod == "OPTIONS") { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS"); HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept,X-Requested-With"); HttpContext.Current.Response.End(); } } } }
服务器也可以通过放置crossdomain.xml在根目录下指定该逻辑，参考http://www.weibo.com/crossdomain.xml
附录2 用来解决客户端问题的参考代码（代码比较潦草，不过重要的是逻辑）
function cloverGet(url, params, isRenderLoading, callback) { if ($.browser.msie && parseInt($.browser.version, 10) >= 8 && window.XDomainRequest) { var xdr = new XDomainRequest(); xdr.onload = function (e) { var data = $.parseJSON(xdr.responseText); if (data == null || typeof (data) == 'undefined') { data = $.parseJSON(data.firstChild.textContent); } //需要手动处理json数据 }; xdr.onerror = function (e) { } xdr.open("GET", url); xdr.send(); } else { $.ajax({ url: url, cache: false, data: params, dataType: 'json', success: function (data) { }, error: function (e) { }, complete: function (e) { }, beforeSend: function (xhr) { } }); } } function cloverPost(url, params, callback) { if ($.browser.msie && parseInt($.browser.version, 10) >= 8 && window.XDomainRequest) { var xdr = new XDomainRequest(); xdr.contentType = "text/plain"; xdr.onload = function () { var data = $.parseJSON(xdr.responseText); if (data == null || typeof (data) == 'undefined') { data = $.parseJSON(data.firstChild.textContent); } //需要手动格式化 }; xdr.onerror = function (e) { } xdr.open("POST", url); xdr.send(params); //这里的数据是 a=1&b=2这样的 } else { $.ajax({ type: "POST", url: url, data: params, // dataType: "json", //有的时候jsonp也是一个选择 crossDomain: true, success: function (data) { }, error: function (e) { }, complete: function (e) { }, beforeSend: function (xhr) { } }); } }
- get和post都行了。。。还有文件上传呢。。。这样的POST是不能传文件的。。 （考虑用第三方方案或者不要直接提交）
- 善用工具 例如Fiddler 还有javascript/HTML调试工具 （我个人觉得Chrome和FF的调试器比较好用）似乎不少人还习惯用alert调试。。。。
- IE和safari 跨域iframe有问题， 记得设置header，例如： Response.Headers["p3p"] = "CP=IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT";
- 有兴趣的朋友可以了解一下XSS和CSRF，这可是网站的一大安全问题
- 分解问题是排查问题的一个很好的办法
- 更多的时候，使用同域名的代理服务器是很好的解决方案 （也是唯一的解决方案，如果浏览器直接调用第三方有权限问题的话）