浏览器同源策略
限制js向 其他域名发起请求，浏览器调试报错如下
JSONP 是一种解决方法
浏览器不会阻止带有src属性的标签发请求。所以可以常用的 <script src="xxxxx"></script> 来发请求
但是：返回的数据(字符串)需要符合js的语法。而服务端则专门做了支持。比如就返回 functionName(arg...)
这种方案就称为JSONP
例如某电视台查询最近节目单的接口就做了支持：
http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403
接口返回字符串：list({data:[xxxx......]})
这个字符串放到js里面就可以解析为可以执行的动作，并且参数包含了服务端想提供给客户端的数据，前端只要有list这个js函数就可以对获取到的数据自行处理
例：普通js 创建<scrript src='' ></script> 标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-2.2.3.min.js"></script> </head> <body> <h1>从后台获取结果</h1> {{ result }} <h1>前端js直接向其他域名发起get请求</h1> <input type="button" value="点击发起js请求" onclick="getContent();"/> <div id="container"></div> </body> <script> function getContent(){ //////////普通js发起jsonp//////////////// // 利用js向查询天气接口发请求，接口返回的为js 的函数字符串，并且在函数中传参 // 浏览器不会阻止 带有src 属性的标签发get请求，从而实现跨域请求 let tag = document.createElement('script'); tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403'; document.head.appendChild(tag); // 向浏览器增加元素后，含有src属性会立即发送get请求到目标网站 // 返回数据为符合js语法的函数：如list({data:[({data:xxx,,,,,,,）自己的js中必须提前创建好这个函数来获取数据做对应的处理 // 标签增加获取到数据后，后立即删除此标签即可 document.head.removeChild(tag); } // 创建支持jsonp的接口返回的函数 function list(arg) { console.log(arg) } </script> </html>
点击按钮发请求，查看获取到的数据
ajax 发起跨域请求
参数说明：
dataType: 'jsonp', //数据类型
jsonp:'callback', // 表示发送请求的时候传给后端url中的查询参数名
jsonpCallback: 'list' // 表示发送请求的时候传给后端url中的查询参数名对应的值
// jsonp 和jsonpCallback 的值组合在url中 相当于在url中加了?callback=list
最后发请求的实际url地址类似：http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1596885252309
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-2.2.3.min.js"></script> </head> <body> <h1>从后台获取结果</h1> {{ result }} <h1>前端js直接向其他域名发起get请求</h1> <input type="button" value="点击发起js请求" onclick="getContent();"/> <div id="container"></div> </body> <script> function getContent(){ $.ajax({ url: 'http://www.jxntv.cn/data/jmd-jxtv2.html', type:'POST', dataType: 'jsonp', jsonp:'callback', // 表示发送请求的时候传给后端url中的查询参数名 jsonpCallback: 'list' // 表示发送请求的时候传给后端url中的查询参数名对应的值 // jsonp 和jsonpCallback 的值组合在url中 相当于在url中加了?callback=list }) } // 创建支持jsonp的接口返回的函数 function list(arg) { console.log(arg) } </script> </html>
