跨域问题

最新推荐文章于 2024-07-06 09:00:00 发布

原创最新推荐文章于 2024-07-06 09:00:00 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

工作中前台遇到的问题专栏收录该内容

9 篇文章

订阅专栏

跨域是跨域名或者跨端口号进行调用

只有请求和被请求，的域名和端口都一直才算在一个域

js使用Ajax进行跨域请求，无法返回数据（json、xml等）无论是静态页面、动态页面、web服务都不可以。

为什么有跨域这一问题？

浏览器基于安全考虑，不允许ajax跨域访问。

使用jsonp来解决跨域问题。

jsonp核心原理：

1.我们发现，web页面上调用js文件的时候，不受跨域影响。我们还发现凡是拥有src这个属性标签都可以跨域

2.就有人想，在远程服务器上把数据装进js格式的文件中。供客户调用。

3.而JSON的纯字符格式可以简洁描述复杂数据。JSON还被js原生支持。就可以在客户端随意处理json格式的数据

于是有了jsonp，来帮你把需要的数据打包，和解析。

该协议允许用户传递一个callback参数给服务器，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端可以随意定义自己的函数，自动处理返回数据。

比如：

1.远程服务器目录下有个remote.js文件

2.本地服务器目录下有个jsonp.htm页面

<!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></title>
    <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

这样，肯定能访问到js，然后执行访问到的js

3.在jsonp.htm页面定义一个函数，然后在远程remote.js中传入数据进行调用

<!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></title>
    <script type="text/javascript">
    var localHandler = function(data){
        alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
    };
    </script>
    <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

remote.js内容写着

localHandler({"result":"我是远程js带来的数据"});

这样就把远程的数据带过来了。

那么我们如何让远程服务器，知道我本地函数的名字叫localHandler呢？

<script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
    };
    // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script); 
    </script>

这里是将js动态查询。这也是jsonp客户端实现的核心部分。
传入一个参数，code=CA1998