解决JS跨域请求

来源：互联网发布：手机淘宝闲鱼在哪里编辑：程序博客网时间：2024/05/16 18:59

1.跨域请求

出于安全考虑，XMLHTTPRequest请求最初的设计是只允许访问同源域名，即：使用ajax请求访问其他服务器的数据，客户端会出现跨域问题.

跨域问题是由于javascript语言安全限制中的同源策略造成的.

简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.

例如:

URL说明是否允许通信http://www.a.com/a.js
http://www.a.com/b.js同一域名下允许http://www.a.com/lab/a.js
http://www.a.com/script/b.js同一域名下不同文件夹允许http://www.a.com:8000/a.js
http://www.a.com/b.js同一域名，不同端口不允许http://www.a.com/a.js
https://www.a.com/b.js同一域名，不同协议不允许http://www.a.com/a.js
http://70.32.92.74/b.js域名和域名对应ip不允许http://www.a.com/a.js
http://script.a.com/b.js主域相同，子域不同不允许http://www.a.com/a.js
http://a.com/b.js同一域名，不同二级域名（同上）不允许（cookie这种情况下也不允许访问）http://www.cnblogs.com/a.js
http://www.a.com/b.js不同域名不允许

2.解决方法

假设www.b.com想使用www.a.com的接口，该怎么解决呢？

解决的方法有以下4种：

第一种方法：

Script标签是可以跨域访问服务器上的数据的.因此,可以指定script的src属性为跨域的url,从而实现跨域访问.

1.首先在B站的script标签写上跨域的A站接口路径

2.B站的js中，写一个方法来处理A站返回的数据

function show($json_list) {

......

}

3.A站点返回的格式加上方法前缀，即所谓的jsonp格式

a.php返回

return "show($list)";

总结：

为了使代码更为灵活，我们可以让a.php接收一参数，来使返回的方法名更为灵活。

return "$function_name($list)";

第二种方法：

定义html的头部

// 指定可信任的域名来接收响应信息，推荐
<?php header('Access-Control-Allow-Origin:http://A.abc.com'); ?>
或

加入// 使用通配符 * ，表示当前服务端通话任何域名发起请求，不推荐
<?php header('Access-Control-Allow-Origin:*'); ?>

header('Access-Control-Allow-Origin:*');是html5新增的一项标准功能，因此 IE10以下版本的浏览器是不支持的，因此，如果要求兼容IE9或更低版本的ie浏览器，会导致使用此种方式的跨域请求以及传递Cookie的计划夭折，最终还得回归JSONP(目前主流的处理方式是使用JSONP，易于实现，兼容性好，可查的资料也很多。)

第三种方法

最简单暴力的方法

直接在后端请求指点的接口，将接口的数据直接返回

<?php return file_get_content('http://www.a.com');?>

第四种方法

对于二级域名相同的，可以使用以下的方法

如http://www.a.com http://qq.a.com

js:

document.domain = 'a.com';

$ajax({

......a

});

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>Untitled Page</title>      <script type="text/javascript" src=jquery.min.js"></script>      <script type="text/javascript">     jQuery(document).ready(function(){        $.ajax({             type: "get",             async: false,             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",             dataType: "jsonp",             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据             success: function(json){                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');             },             error: function(){                 alert('fail');             }         });     });     </script>     </head>  <body>  </body> </html>

0 0