xmlhttprequest跨域体验

环境:
Chrome, Safari, Android 2.3, iOS4

兼容性问题
IE:XDomainRequest
Other:XMLHttpRequest

实现方式
通过新增响应头Access-Control-Allow-Origin
格式:
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: http://domain.com
Access-Control-Allow-Origin: http://a.domain.com

体验过程中的问题
1. 如何在响应过程中带用户凭证?
通过给XHR实例设置 withCredentials 属性。在跨域中实验失败,必须为同源才可以。
如:xhr.withCredentials = true

2.对于是POST和存在自定义HTTP头时无数据响应?
在使用POST时,发现无法取到响应的数据。
在有自定义HTTP头时,发现无法取到响应数据。
这两种情况可以通过添加Access-Control-Allow-Methods/Access-Control-Allow-Headers来解决。
这里在实施过程中发现一个小问题。在POST时,在FF下没添加Content-Type可以正常处理,在Chrome和Safari下提示“Request header field Content-Type is not allowed by Access-Control-Allow-Headers.”。添加后正常。

3.对于多个域下要调用怎么办?
目前没有很好的解决方法,在网上搜索了一下。网上也有一些解决方案。
不过有看到opera可以通过空格分格开(Access-Control-Allow-Origin: http://a.domain.com http://b.domain.com),但是没有具体测试。

示例:
服务器端页面:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%><%
    response.addHeader("Access-Control-Allow-Origin", "http://dev.example.com");
    response.addHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
    response.addHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
%>
<h1>X-Cross Domain Data</h1>

客户端页面:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>xcross</title>
  <script type="text/javascript" src="/html5/res/js/effect.mobile_min.js"></script>
 </head>

 <body>
  <h1>...</h1>
  <script type="text/javascript">
  var l = E4M.getPageLoader("loader");

  l.set("success", function(data, main){
      alert(data + "\n" + main)
  });

  l.loadPage("http://127.0.0.1:8080/teamwork/xcross.jsp", "POST", "", "xcross", false);
  </script>
 </body>
</html>

在这里通过HTTP抓包可以看到两个请求。
第一个请求是用OPTIONS方法。 //这里所做是的是预检查,从服务器确认是否可以继续
第二个请求才是你发起的请求方法。

最后一次请求的RAW:

————–REQUEST—————

POST http://127.0.0.1:8080/teamwork/xcross.jsp HTTP/1.1
Host: 127.0.0.1:8080
Connection: keep-alive
Content-Length: 0
Cache-Control: no-cache
Origin: http://dev.tenpay.com
X-E4M-With: 2.9
No-Cache: 1
X-Requested-With: XMLHttpRequest
If-Modified-Since: -1
Pragma: no-cache
Last-Modified: Thu, 1 Jan 1970 00:00:00 GMT
User-Agent: Mozilla/5.0 (Linux; U; Android 2.3.6; en-us; Nexus S Build/GRK39F) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Content-Type: application/xml
Expires: 0
Accept: */*
Referer: http://dev.example.com/xcross.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8
Accept-Charset: GBK,utf-8;q=0.7,*;q=0.3

————–RESPONSE—————
HTTP/1.1 200 OK

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Set-Cookie: JSESSIONID=4D05A5FA9C53B89C91B9344E4B20CDA7; Path=/teamwork/; HttpOnly
Access-Control-Allow-Origin: http://dev.example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, Content-Language, Cache-Control, X-E4M-With
Content-Type: text/html;charset=utf-8
Content-Length: 30
Date: Wed, 15 Aug 2012 06:25:50 GMT

<h1>X-Cross Domain Data</h1>