Jsonp解决跨域

最新推荐文章于 2024-08-14 16:49:42 发布

happy0012002

最新推荐文章于 2024-08-14 16:49:42 发布

阅读量1.7k

点赞数

文章标签：跨域 jsonp 原生方式回调函数服务器响应

本文链接：https://blog.csdn.net/happy0012002/article/details/117262270

版权

查阅网上解决跨域的方式，主要有以下几种

1、使用jsonp方式

jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

1.1第一版：

后端，采用nginx字节返回固定对象

   location /test1 {
       default_type application/json;
       return 200 '{"status":"success","result":"nginx json"}';
   }
前端：写了一个简单的页面，引入jquery

结果

结论：能访问数据成功，但是回调永远进入的都是error函数。

1.2 第二版前端增加jsonp和jsonpCallback属性

$.ajax({
           url : "http://10.20.65.161/test1",
           type : "get",
           dataType:"jsonp",
           jsonp:'callback',
           jsonpCallback:"mycallback",//
           error : function(data) {
               alert("失败："+JSON.stringify(data));
           },
           success : function(data) {
               alert("成功："+JSON.stringify(data));
           }
       });

增加了这2个属性以后,请求的url会变成：http://10.20.65.161/test1?callback=mycallback

后端可以取到callback的值，将返回内容封装成一个函数，具体如下

再测试：获得成功的结果，截图如下。

2.原生方式

function getdata1(){
var script = document.createElement('script');
script.type = 'text/javascript';

       // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
       script.src = 'http://10.20.65.161/test1?callback=handleCallback';
       document.head.appendChild(script);
   }
   // 回调执行函数
   function mycallback(res) {
alert(JSON.stringify(res));
}