前端JS跨域策略与httpClient的区别
方案:由于html的同源策略不能访问,利用javascript中src属性的开放策略解决
这种策略为jsonp:JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题
跨域思想:
1.利用javascript中的src属性
2.定义回调函数callback(data)
3.将返回值结果进行特殊格式的封装 callback (JSON数据)
html页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSONP测试</title> <script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ alert("测试访问开始!!!!!") $.ajax({ url:"http://manage.jt.com/web/testJSONP", type:"get", //jsonp只能支持get请求 dataType:"jsonp", //dataType表示返回值类型 jsonp: "callback", //指定参数名称//默认为callback jsonpCallback: "hello", //指定回调函数名称 success:function (data){ //data经过jQuery封装返回就是json串 alert(data.itemId);//数据读取名要相同 alert(data.itemDesc); //转化为字符串使用 //var obj = eval("("+data+")"); //alert(obj.name); } }); }) </script> </head> <body> <h1>JSON跨域请求测试</h1> </body> </html> Controller层: @RequestMapping("/web/testJSONP") public JSONPObject jsonp(String callback){ ItemDesc itemDesc = new ItemDesc(); itemDesc.setItemId(1000L).setItemDesc("大头精"); return new JSONPObject(callback,itemDesc); }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· 趁着过年的时候手搓了一个低代码框架
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现