如何实现js跨域调用

时间:2022-08-29 18:43:33

最近需要提供一个接口给外部门使用,没遇到过降域的问题。比较通用的方法,可以使用jsonp方式进行调用。下面有一篇文章讲得不错,把原理讲得很清晰,基本原理:就是利用js的src标签,src可以越过同源策略的限制,巧妙实现跨域访问。

http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html


另外:这里要指出的一点就是,使用jsonp方式,无法使用post方式提交表单,根本原因就是因为他是通过script方式去加载的。


=================================================================================================

给其他部门写了个cgi,早上把服务端进行了下改造,想使用jsonp方式进行跨域,结果发现jasonp方式无法使用post方式访问,又花了两个小时,改造成了使用iframe + document降域的方式进行访问。

具体方案如下:

欲提供给外部调用的cgi地址为:http://aa.bb.com/hello,外的域名为http://cc.bb.com/nimei.html

可以通过在同域下面,新建一个页面,作为代理页面,通过代理页面来绕过跨域。

1、新建一个页面:http://aa.bb.com/agent.html

在该页面下:

<html>

<body>

<script>

document.domain="bb.com" //这里把域降成bb.com

function callback()

{

/*这里可以随心所欲调用aa.bb.com下的cgi了

这里特别注意:前提必须相对的协议,该页面是http的,你不能去调用https协议的cgi,否则访问不了

*/

}

</script>

</body>

</html>

2、外部调用,使用iframe的src属性,去加载1中的代理页面,通过这个属性来绕过js同源访问策略。

http://cc.bb.com/nimei.html中,添加如下html代码片段:

<html>

<head>

</head>

<script>

document.domain="bb.com";  //这里把域降到基础域

 function callChild()

 {

myFrame.window.callback();                 //这里便可以调用代理页面提供的接口函数了,实现跨域调用

 }

</script>

<iframe name="myFrame" src="http://aa.bb.com/agent.html" style="display:none"></iframe>

</html>


总结:实施过程当时,因为把协议没对上,所以总是跨域访问不成功。之前看过不少理论上的东西,但做起来,又是另一种滋味。

还是那句老话:纸上得来终觉浅 绝知此事要躬行!!!