请求跨域问题解决办法之 - jsonp

最新推荐文章于 2022-09-18 11:59:10 发布

李逸风

最新推荐文章于 2022-09-18 11:59:10 发布

阅读量524

点赞数

分类专栏： Javascript 文章标签： jsonp 跨域 ajax

本文链接：https://blog.csdn.net/sheng_li/article/details/77524696

版权

Javascript 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

// 2018-03-26更新

以下的代码是前端部分的，后台部分代码可以参考:

java: https://www.cnblogs.com/ciscoo/p/6412731.html

php: https://www.cnblogs.com/xiezn/p/5651093.html

还有一种办法是，jquery ajax 封装的jsonp

ajax请求数据时如果遇到报No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.这个错，那就是跨域了。

至于为什么会跨域我们这就不赘述了，这不是我们的重点，重点是解决大家的问题。

我们的解决办法是使用jsonp中的callback回调函数。

首先

在html页面中写一个<script src=""></script>

src里面就填我们的请求地址和详细参数，其中callback函数放在http://XXXX.com?callback= backfunction ，url地址后的第一个参数

这个backfunction，我们要在js文件里定义一个 function backfunction(data){}

下面就清晰很多了，函数里面就是我们ajax操作success函数里的操作了。

下面是一个完整的请求过程

html

<script type="text/javascript" src="XXXX?callback=backfunction&size=5&index=1"></script>

function backfunction(data){
    console.log(data);
    for(var i in data.result){
        $('#blockPage').append('<div class="list" >'+result[i].title+'<span>'+result[i].name+'</span></div>');
    };
};

ps: 之所以会出现跨域，其实就是浏览器的同源策略（网上有很多详解，我这里就不赘述了，如果要了解的可以查看阮一峰的《浏览器同源策略及其规避方法》），这里就是利用<script>元素不受同源策略影响，对服务器进行json数据请求。（这里有一个小点：只能发送get请求，不能发送post请求，就算写了post最后其实也是进行get），最后成功返回数据。