解决JS跨域请求

最新推荐文章于 2023-05-15 17:34:42 发布

骆驼大笨笨

最新推荐文章于 2023-05-15 17:34:42 发布

阅读量810

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/juan083/article/details/46674721

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>