前端跨域之Jsonp实现原理及.Net下Jsonp的实现
程序员文章站
2022-06-24 11:44:14
jsonp的本质是通过script标签的src属性请求到服务端,拿到到服务端返回的数据 ,因为src是可以跨域的。前端通过src发送跨域请求时在请求的url带上回调函数,服务端收到请求时,接受前端传过来的回掉函数名称,将其拼接成js函数调用返回到前端即可完成跨域请求。 前端实现代码: .Net服务端 ......
jsonp的本质是通过script标签的src属性请求到服务端,拿到到服务端返回的数据 ,因为src是可以跨域的。前端通过src发送跨域请求时在请求的url带上回调函数,服务端收到请求时,接受前端传过来的回掉函数名称,将其拼接成js函数调用返回到前端即可完成跨域请求。
前端实现代码:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> </head> <body> </body> </html> <script> function successfun(data) { console.log(data); } function show(data) { console.log(data); } </script> <!-- 把请求的成功的回掉函数名称通过url传参传到服务端,服务端返回时需要拼接一个函数调用返回到前端 --> <script src="https://localhost:44381/home/action?cb=show"></script> <script src="https://localhost:44381/home/getscript?cb=successfun"></script>
.net服务端代码:
using system.collections.generic; using microsoft.aspnetcore.mvc; using newtonsoft.json; namespace jsonp.controllers { public class homecontroller : controller { public iactionresult action() { var cb = request.query["cb"]; return content(cb + "(123)"); } public iactionresult getscript() { var cb = request.query["cb"]; var data = new list<int>() { 1,2,3,4,5,6,8,9,6,3,5,2,0,3 }; var result = $"{cb}({jsonconvert.serializeobject(data)})"; return content(result); } } }
推荐阅读
-
jsonp跨域及实现百度首页联想功能的方法
-
前端跨域之Jsonp实现原理及.Net下Jsonp的实现
-
借助script进行Http跨域请求:JSONP实现原理及代码_javascript技巧
-
jsonp跨域及实现百度首页联想功能的方法
-
JSONP跨域的原理解析及其实现介绍_javascript技巧
-
JSONP跨域的原理解析及其实现介绍_javascript技巧
-
【原创】微信授权、获取用户openid-纯前端实现——jsonp跨域访问返回json数据会报错的纯前端解决办法
-
借助script进行Http跨域请求:JSONP实现原理及代码_javascript技巧
-
前端跨域之Jsonp实现原理及.Net下Jsonp的实现