javascript跨域访问方式

缺乏、安全感 2022-08-04 10:48 176阅读 0赞

这几天在试用淘宝的open api功能，看了它的实例有php、java、c\#、ruby，可惜都是服务器端例子，就突然有了想法，是不是可以用javascript写一个客户端的例子。淘宝open api虽然其它地方做的不是很人性化，但是还提供了一个伪代码的例子，既然这样，说干就干。说实话，以前从来没有写过javascript代码，不过有网络也不是什么大问题，依靠w3school和百度基本上花了一个小时就完成了，在dreamweaver上面使用“实时视图”，看结果也没有问题，可是一旦用firefox或者ie打开，就不行了，获取不了淘宝api地址提供的json或者xml数据，刚开始我还以为是编码的问题，xmlhttprequest的处理写的有误，但是改了很多，问题依旧，很是恼火，就仔细看了xmlhttprequest的说明，后来才恍然大悟：javascript是不能跨域访问服务器的。看来不做前端开发就会很多基础问题都不懂啊！

那么怎么解决呢？百度google了很多看到可行并试验过的解决办法有：

1. 在服务器端架设代理，用php或者别的语言写一个proxy函数，通过这个函数完成对第三方域名的数据请求，这个办法和我最开始的纯javascript方案冲突，没有选择，不过的确可用

2. 采用javascript动态资源载入的办法，就是通过javascript动态创建一个Dom script元素：createElement()，然后设置该script元素的src地址是你想跨域请求数据的url，这样第三方域名的数据就可以被载入进来了，但是有一个缺点就是，第三方域名的数据必须是正确的javascript格式数据（比如json数据），在YUI上的GET工具就有一个封装好的实现，大家可以放心、快捷的使用，最开始我也是想用这个办法，毕竟淘宝open api的数据是支持json格式的，但是在实际过程中又面临这样的问题：淘宝open api返回的json数组，是没有定义变量名的，而这样的joson数组在javascript是非法的，因此任然得不到调用，这个办法失败，但是这是一个很好的办法，到时候可以在数据统计js代码上做一些文章，比如说进行用户调查等

3. 采用iframe的办法，方法和方法2比较类似，也是通过javascript动态创建一个Dom iframe元素，然后设置iframe元素的地址是你想跨域请求的数据的url，然后通过javascript获取iframe元素的<pre>标签里面的内容就是你想要得到的跨域数据了。这个办法的缺点就是浏览器缓存严重，如果同一个url的数据变化频率高的话，这不是一个好办法，还好淘宝open api在他的api地址里面加入了一个和时间相关的md5签名，每次请求的url刷新一次，由于时间不同，url都是不一样的，浏览器一般就缓存不了了（对于opera这种缓存超牛的浏览器没有测试），最后就用了这个方案解决了

经过这次折腾有两个感受：

1. 前端也是有很多东西可以学习的

2. firefox一定要学会firebug，它能提供给你很多前端开发、调试的帮助