1.背景
在CORS技术没有出来之前,利用XHR对象发送跨源请求是比较麻烦的,所以当时就有一些另辟蹊径的方式出现,这些方法是可以替代XHR对象的跨源技术,放到现在依旧不过时。
2.主要属性src
属性src是个别html标签的一个属性,该属性支持跨域请求,但是标签不一样,就导致跨源请求方式不一样,不过根本上就是因为src属性,才能避开浏览器的同源策略,从而完成跨域请求
2.1图片探测技术
该技术是利用<img>标签实现跨域请求,当然实现跨域的核心还是src属性,该技术常常被用在网页跨源请求加载图片、线上广告跟踪等业务中。要清楚的是,浏览器通过该技术是获取不到服务器响应的任何数据的(使用img标签不能访问服务器返回的响应内容,也就是说只能单向的发送get请求),但可以通过监听onload、onerror事件知道什么时候能接收到响应
<img src="http://127.0.0.1:8080/userimage" alt="这是一只猫"> // 会成功跨域访问服务器
优点:
能够完成跨域请求
缺点:
-
只能单向发送GET请求
-
不能获取服务器返回的任何响应
2.2JSONP原理
JSONP是“JSON with padding”的简写,是在Web服务商流行的一种JSON变体。JSONP实质是是通过创建<script>标签并为该标签添加src属性来完成跨源请求的。JSONP看起来个JSON一样,只是会被放在一个函数调用里充当参数,例如:
callback({"name" : "hzh"})
JSONP格式包含两个部分:回调和数据。回调是在页面接收到响应之后应该调用的函数,通常回调函数的名称是通过请求来动态指定的。而数据就是作为参数传给回调函数的JSON数据。JSONP原理简单理解就是我们在HTML文件给上一个回调函数,之后通过<script>标签的src属性发起跨源请求,这个请求返回回来的必须是有关调用这个回调函数的方法,例如:
服务器端代码(NodeJS)
import express from 'express';
const app = express();
let port = 8080;
let ip = '127.0.0.1';
let obj = {
name :'hzh',
ip : '127.0.0.1'
}
app.get('/user',(req,res) => {
let myJSONP = req.query.callback; // 获取回调函数名称
res.send(`${myJSONP}(${JSON.stringify(obj)})`); // 响应返回有关调用客户端代码的回调函数的方法
});
app.listen(port,() => {
console.log(`your sever is running at http://${ip}:${port}`);
})
客户端代码
function myJSONP(response){ // 响应之后我们需要处理的回调函数
console.log(`You are at IP address ${response.ip}`)
}
let script = document.createElement('script');
script.src = 'http://127.0.0.1:8080/user?callback=myJSONP';
document.body.insertBefore(script,document.body.firstChild);
优点
-
兼容性良好
-
使用方便,能接收服务器返回的响应
缺点
-
不够安全
-
只能进行GET请求
-
不好确定JSONP请求是否失败。虽然HTML5规定了<script>标签的onerror事件处理程序,但还没有被任何浏览器实现。为此只能用计时器来决定是否放弃等待响应。这种方式并不准确,毕竟不同用户的网络连接速度和贷款是不一样的。