后端实现jsonp跨域的问题

最新推荐文章于 2021-03-22 12:38:24 发布

小蒙恩

最新推荐文章于 2021-03-22 12:38:24 发布

阅读量320

点赞数

分类专栏： Don't forget

本文链接：https://blog.csdn.net/weixin_42931028/article/details/92419786

版权

Don't forget 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

什么是同源策略，什么是跨域
同源：在互联网中，两个网络地址的协议，域名，端口号都一致，则表示同源。

同源策略：一种在同源地址之间进行信息交互的方式。

跨域：在某些情况下，需要进行在不同源的网络地址之间进行信息交互。

**这里转载一个 response header的详解：**https://blog.csdn.net/weixin_43453386/article/details/83792682
问题的关键原因：Ajax直接请求普通文件存在跨域无权限访问的问题
jsonp的实现原理是通过’<‘script’>'标签的src属性设置请求url 指定js，这样被指定的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>

而jquary中的ajax 直接可以发送jsonp请求直接将结果拿到success中调用

<!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

收藏

觉得还不错? 一键收藏
0
评论
后端实现jsonp跨域的问题

什么是同源策略，什么是跨域同源：在互联网中，两个网络地址的协议，域名，端口号都一致，则表示同源。同源策略：一种在同源地址之间进行信息交互的方式。跨域：在某些情况下，需要进行在不同源的网络地址之间进行信息交互。**这里转载一个 response header的详解：**https://blog.csdn.net/weixin_43453386/article/details/8379268...
复制链接

扫一扫