飘易博客(作者:Flymorn)
订阅《飘易博客》RSS,第一时间查看最新文章!
飘易首页 | 留言本 | 关于我 | 订阅Feed

JS跨域:利用apache的代理模块完美实现方法

Author:flymorn Source:Flymorn
Categories:PHP编程 PostTime:2010-6-10 19:09:36
正 文:
    在做ajax互动效果时,我们需要利用Microsoft.XMLHTTP组件获取远程信息,但出于安全问题,javascript是不允许跨域的,只能在本域内操作数据。而这对于需要进行跨域获取数据的应用来说,无疑是一大障碍。

    飘易在研究了众多可以实现js跨域的方法后,发现利用 apache 的proxy代理模块功能,就可以实现完美的js跨域处理了。特和大家分享如下:

1.首先要开启apache的rewrite重写模块和proxy代理模块。

修改apache配置文件 conf/httpd.conf ,去掉以下三行前边的#号
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule rewrite_module modules/mod_rewrite.so

重启apache.

2.编写rewrite规则,在当前目录里的.htaccess文件里加入以下语句:

RewriteEngine on
RewriteBase /
RewriteRule ^call-(.*)$ http://www.piaoyi.org/s?wd=$1 [L,R,P,NC]

需要注意的是RewriteRule 后边的重写规则参数
L 立即停止重写操作,并不再应用其他重写规则。
R 是强制外部重定向,因为是要跨域定向到外部域,所以必须有R
P 是强制使用代理转发,这个也是必须的.
NC 是不区分大小写,这个倒是可选,但是为了增加兼容性,最好还是加上.(参考

    做完以上工作后,就基本OK了。现在可以尝试用ajax请求 http://127.0.0.1/call-key 会发现得到的数据是apache已经重新定向了的 http://www.piaoyi.org/s?wd=key 的数据。

   这种方式实现的js跨域飘易认为是比较完美的。但需要你有服务器权限,才可以开启 apache配置文件 conf/httpd.conf 的代理模块,重写模块一般的服务器都是开启的。

    下面飘易再公布一段利用这个js跨域的方法实现的ajax代码:

<script language="javascript">
function getd(){
try{
var xmlHttp;
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.open("get","http://localhost/call-qq",false);
xmlHttp.send("");
var strhtml=xmlHttp.responseText;

reg=/blank">.*?<\/a>/igm;
result=strhtml.match(reg); //飘易注:返回数组
if(result){
var ss="";
for(var i=0; i<result.length; i++){
ss2=result[i].replace(/blank">/ig,"");
ss2=ss2.replace(/<\/a>/ig,"");
ss += ss2+"|";
}
}
else{ss="";}

//alert(ss);
document.getElementById("tt").innerHTML=ss;

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
xmlhttp.open("POST", "http://localhost/1.php", false);  //提交服务器脚本处理好后返回
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
xmlhttp.send("d="+escape(ss)); //传输先编码
strText = unescape(xmlhttp.responseText);  //解码 
 
alert(strText);

}catch(ex){alert(ex.description);}
}
</script>

<input type="button" name="a" value="chick here" onclick="getd()" />
<span id='tt'></span>

     以上就是比较全面的方法了(注意 js 是区分大小写的)。但是飘易现在遇到一个问题,就是使用apache的代理模块和重写模块后,我没有实现的功能是: “http://localhost/call-你好”  如果重定向里有汉字,就无法实现重定向了,错误代码如下:
“Proxy Error
The proxy server received an invalid response from an upstream server.
The proxy server could not handle the request GET /call-好.
Reason: DNS lookup failure for: www.piaoyi.org”

    如果对汉字进行url编码,如编码成 http://localhost//call-%BA%C3 ,RewriteRule规则识别不了百分号 %,apache会返回 :“403 Forbidden You don't have permission to access /call-好
on this server”错误。飘易猜测这是编码问题。暂时留在这,如果哪位大侠有解决方法,请不吝赐教。
作者:flymorn
来源:Flymorn
版权所有。转载时必须以链接形式注明作者和原始出处及本声明。
上一篇:飘易:ajax设计无刷新的评论系统
下一篇:PHP立即刷新缓存(输出)的方法
8条评论 “JS跨域:利用apache的代理模块完美实现方法”
2010-6-12 23:11:46
这个急需,特此感谢了
2 Flymorn
2010-6-13 9:12:36
1 haibor:
我的都写出来了呀。
3 溜达
2010-6-13 15:59:20
不错的 ajax 应用啊。
4 秀秀
2010-6-13 16:15:21
我想这个是不错的,感谢分享。
5 睡人
2010-6-13 23:40:00
apache的配置信息,需要服务器权限,一般共享主机的用户就不行啦。
2010-8-5 19:05:52
很不错,记得回访啊!
7 小乌
2010-11-17 17:51:40
不错啊。。。 哈哈。。。。
8 酒逍遥
2011-10-27 14:35:20
base64编码把..
发表评论
名称(*必填)
邮件(选填)
网站(选填)

记住我,下次回复时不用重新输入个人信息
© 2007-2010 飘易博客 Www.Piaoyi.Org 原创文章版权由飘易所有 渝ICP备07006361号