<![CDATA[向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除]]> http://www.jackxiang.com/index.php zh-cn http://www.jackxiang.com/post/2683/ <![CDATA[关于跨域问题]]> jack <xdy108@126.com> Thu, 04 Feb 2010 06:36:04 +0000 http://www.jackxiang.com/post/2683/

一直对JS的跨域概念很迷惑，记得是在刚学ajax的时候才了解了一下这个概念，后来就再没有接触。主要工作上是做PHP为主，前端的东西几乎不需要插手。今天看了膘叔的一篇文章《孟宪会之AJAX（XMLHttpRequest）进行跨域请求方法详解》，一直是知道跨域会存在问题，但是自己就没有动过手体验一下具体会造成什么问题，于是决定试验一下。在blog服务器上写了个test.php测试脚本

  <?php
  $data = array('status' => 1, ‘msg’ => ‘hello’);
  echo json_encode($data);
  ?></p>
  <p>

前端测试页面


  <script>
  var xhr = new XMLHttpRequest();
  var url = "http://jackywdx.cn/test.php";
  function test(){
      if(xhr)
      {
          xhr.open('GET', url, true);
          xhr.onreadystatechange  = handler;
          xhr.send();
      }
  }
  function handler(evtxhr)
  {
      if(xhr.readyState == 4){
          if(xhr.status == 200){
              var re = xhr.responseText;
              alert(re);
          }else{
              alert('status not 200');
              alert(xhr.status);
          }
      }else{
          alert('readyState not 4');
          alert(xhr.readyState);
      }
  }</p>
  <p><body onload="test()">
  hello
  </body>


在本地访问，http://test.cn/test.html 结果是失败，没有alert出responseText; 在test.php文件里面增加一句： header(”Access-Control-Allow-Origin:http://test.cn”); 这样就可以了。我用的FF版本是3.5.7，所以支持这个Access-Control-Allow-Origin HTTP头部参数。用HTTPFOX抓包看到结果：

(Request-Line)

GET /test.php HTTP/1.1

Host jackywdx.cn

User-Agent Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7

Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language zh-cn,zh;q=0.5

Accept-Encoding gzip,deflate

Accept-Charset GB2312,utf-8;q=0.7,*;q=0.7

Keep-Alive 300

Connection keep-alive

Referer http://test.cn/test.html

Origin http://test.cn

(Status-Line) HTTP/1.1 200 OK

Server nginx/0.7.61

Date Fri, 29 Jan 2010 02:43:39 GMT

Content-Type text/html

Transfer-Encoding chunked

Connection close

X-Powered-By PHP/5.2.6

Access-Control-Allow-Origin http://test.cn

Author jackywdx

X-Via US_RASHOST_VPS

Content-Encoding gzip

解决JS跨域问题还有一些解决办法：

如果是同一主域的话可以设置document.domain

另外还可以通过flash来作为中转角色，flash跨域可以通过crossdomain.xml来解决，不过这种方法速度会比较慢。毕竟多了一层中间层。

还有一种比较土的方法就是在相册的域下面做一个同样的接口-.- ]]> http://www.jackxiang.com/post/2683/#blogcomment51515 <![CDATA[[评论] 关于跨域问题]]> 孩子 <user@domain.com> Thu, 04 Feb 2010 07:01:04 +0000 http://www.jackxiang.com/post/2683/#blogcomment51515