跨域问题-jsonp
Posted 甲乙丙丁少
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨域问题-jsonp相关的知识,希望对你有一定的参考价值。
前端
同源策略并不会拦截静态资源请求,那么就将接口伪装成资源,然后后端配合返回一个前端预定义的方法调用,将返回值放入调用该函数的形参即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //前端预定义 function getName(rep){ document.write(rep.name) console.log(rep) } </script> </head> <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="http://localhost:8082?callback=getName"></script> </body> </html>
后端
后端以node为例,其他语言大同小异
var http = require("http"); const url = require("url"); http.createServer(function (request, response) { let params = url.parse(request.url,true); // 返回一段(js)代码【本质是字符串类型】,填充到html中那个script标签的src中。 response.end(params.query.callback + `(${JSON.stringify({name:"abc"})})`); }).listen(8082);
效果
补充
当然了,如果你觉得麻烦,你可以用jq的jsonp或者其他封装ajax支持jsonp的插件,效果一样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> let url=\'http://localhost:8082?callback=getName\'; $.ajax({ url: url, type: "get", dataType: "jsonp", jsonpCallback: "getName", success: function (rep) { document.write(rep.name) console.log(rep) } }) </script> </head> <body></body> </html>
以上是关于跨域问题-jsonp的主要内容,如果未能解决你的问题,请参考以下文章