淘先锋技术网

首页 1 2 3 4 5 6 7

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事件处理程序,但还没有被任何浏览器实现。为此只能用计时器来决定是否放弃等待响应。这种方式并不准确,毕竟不同用户的网络连接速度和贷款是不一样的。