http协议修改js或html,web前端面试题对答篇:HTTP fetch发送2次请求的原因?
web前端面试题对答篇:HTTP fetch发送2次请求的原因?
2020-08-31 04:36:44 289 编程开发
HTTP fetch发送2次请求的原因?面对这道出现频率较高的面试题,我想说的是:发送两次请求的情况确实存在,但这与你所使用的是不是http协议,所采用的是不是fetch真的没有一毛钱关系!接下来,咱们可以通过代码一一去验证……
一、准备工作
1、创建一个文件夹zhangpeiyue
2、在zhangpeiyue文件夹内创建两个文件:server.js与index.html
server.js:搭建一个express服务器,用于提供接口
index.html:通过fetch调用接口。
二、前后端符合同源策略的场景
1、通过server.js创建服务:
const express = require("express");
// 通过 body-parser 接收 post 过来的数据
const bodyParser = require("body-parser");
const app = express();
// 接收 post 的数据为 application/json 格式
app.use(bodyParser.json());
// 将当前文件夹设置为静态资源
app.use(express.static(__dirname));
app.post("/my",(req,res)=>{
res.json({
ok:1,
body:req.body// 将接收到的数据返回给前端
})
});
app.listen(80,(err)=>{
console.log("success");
})
2、启动服务
node server
3、index.html嵌入js:
// 为避免出现缓存,增加 t 参数
fetch("http://127.0.0.1/my?t="+Date.now(),{
method:"post",
body:JSON.stringify({
a:1,
b:2
}),
headers:{
"content-type":"application/json"
}
}).then(res=>res.json())
.then(response=>console.log("Success:",response))
.catch(error=>console.log("Error",error))
4、浏览器打开http://127.0.0.1测试
5、结论
在同源的情况下并未出现请求两次的情况
三、fetch在跨域的情况下
1、server.js修改如下:
const express = require("express");
// 通过 body-parser 接收 post 过来的数据
const bodyParser = require("body-parser");
const app = express();
// 接收 post 的数据为 application/json 格式
app.use(bodyParser.json());
// 将当前文件夹设置为静态资源
app.use(express.static(__dirname));
app.all("*",(req,res,next)=>{
console.log(req.method);
res.set({
"Access-Control-Allow-Origin":"*",
"Access-Control-Allow-Headers":"content-type"
})
next();
})
app.post("/my",(req,res)=>{
res.json({
ok:1,
body:req.body// 将接收到的数据返回给前端
})
});
app.listen(80,(err)=>{
console.log("success");
})
2、将前端content-type设置为application/json,然后通过开发工具的http方式在浏览器打开index.html,或自己重新创建一个服务,在浏览器打开index.html。你会发现其果然请求了两次,分别为OPTIONS请求与POST请求:
// 为避免出现缓存,增加 t 参数
fetch("http://127.0.0.1/my?t="+Date.now(),{
method:"post",
body:JSON.stringify({
a:1,
b:2
}),
headers:{
"content-type":"application/json"
}
}).then(res=>res.json())
.then(response=>console.log("Success:",response))
.catch(error=>console.log("Error",error))
请求方式:OPTIONS
请求方式:POST
3、将js代码中的content-type注释掉,然后在非同源的场景下再次访问,你会发现只发送了一次post请求。
// 为避免出现缓存,增加 t 参数
fetch("http://127.0.0.1/my?t="+Date.now(),{
method:"post",
body:JSON.stringify({
a:1,
b:2
}),
headers:{
// "content-type":"application/json"
}
}).then(res=>res.json())
.then(response=>console.log("Success:",response))
.catch(error=>console.log("Error",error))
只发送了post请求:
4、将content-type更改为application/x-www-form-urlencoded,再次访问,依然只发送了一次POST请求:
// 为避免出现缓存,增加 t 参数
fetch("http://127.0.0.1/my?t="+Date.now(),{
method:"post",
body:JSON.stringify({
a:1,
b:2
}),
headers:{
"content-type":"application/x-www-form-urlencoded"
}
}).then(res=>res.json())
.then(response=>console.log("Success:",response))
.catch(error=>console.log("Error",error))
只发送了post请求:
5、将fetch改为XMLHttpRequest。将content-type设置为application/json。打开index.html,此时会请求两次,分别为OPTIONS请求与POST请求:
const xhr = new XMLHttpRequest();
xhr.open("post","http://127.0.0.1/my?t="+Date.now());
xhr.setRequestHeader("content-type","application/json")
xhr.send(JSON.stringify({a:1,b:2}));
xhr.onload = function () {
console.log(xhr.responseText)
}
请求方式:OPTIONS
请求方式:POST
6、将配置content-type的代码注释掉,结果只发送了一次POST请求:
const xhr = new XMLHttpRequest();
xhr.open("post","http://127.0.0.1/my?t="+Date.now());
// xhr.setRequestHeader("content-type","application/json")
xhr.send(JSON.stringify({a:1,b:2}));
xhr.onload = function () {
console.log(xhr.responseText)
}
请求方式:POST
四、接口的协议为https:
1、server.js:
const express = require("express");
// 通过 body-parser 接收 post 过来的数据
const bodyParser = require("body-parser");
const https = require("https");
const fs = require("fs");
const app = express();
// 创建 https 服务,需要证书与密钥(需要有自己的域名)
const httpsServer = https.createServer({
key:fs.readFileSync(__dirname+"/key/weixin.key"),
cert:fs.readFileSync(__dirname+"/key/weixin.crt")
},app)
// 接收 post 的数据为 application/json 格式
app.use(bodyParser.json());
app.all("*",(req,res,next)=>{
console.log(req.method);
res.set({
"Access-Control-Allow-Origin":"*"
})
next();
})
app.post("/my",(req,res)=>{
res.json({
ok:1,
body:req.body// 将接收到的数据返回给前端
})
});
httpsServer.listen(443,()=>{
console.log("httpsServer->success")
})
2、content-type设置为application/json,然后以http的形式打开页面。结果会请求两次,分别为OPTIONS请求与POST请求:
// 为避免出现缓存,增加 t 参数
fetch("https://weixin.zhangpeiyue.com/my?t="+Date.now(),{
method:"post",
body:JSON.stringify({
a:1,
b:2
}),
headers:{
"content-type":"application/json"
}
}).then(res=>res.json())
.then(response=>console.log("Success:",response))
.catch(error=>console.log("Error",error))
请求方式:OPTIONS
请求方式:POST
五、总结
发送2次请求需要满足以下2个条件:
必须要在跨域的情况下。
除GET、HEAD和POST(only with application/x-www-form-urlencoded, multipart/form-data, text/plain Content-Type)以外的跨域请求(我们可以称为预检(Preflighted)的跨域请求)。
最后,建议大家可以这样回复面试官:之所以会发送2次请求,那是因为我们使用了带预检(Preflighted)的跨域请求。该请求会在发送真实的请求之前发送一个类型为OPTIONS的预检请求。预检请求会检测服务器是否支持我们的真实请求所需要的跨域资源,唯有资源满足条件才会发送真实的请求。比如我们在请求头部增加了authorization项,那么在服务器响应头中需要放入Access-Control-Allow-Headers,并且其值中必须要包含authorization,否则OPTIONS预检会失败,从而导致不会发送真实的请求。
—————END—————
分享结束!喜欢本文的朋友们,欢迎关注公众号 张培跃,收看更多精彩内容,谢过!!
http协议修改js或html,web前端面试题对答篇:HTTP fetch发送2次请求的原因?相关推荐
- web前端面试题对答篇:谈谈你对Promise的理解
回答这个问题时,个人不建议单纯的从Promise的细节知识点答起,因为这个问题的本质是拥有一定宏观性的,如果仅仅回复一些知识点恐怕是满足不了面试官胃口的. 当然,如果这个问题回答不到点上,那么后续面试 ...
- winform接收http请求_web前端面试题对答篇:HTTP fetch发送2次请求的原因?
HTTP fetch发送2次请求的原因?面对这道出现频率较高的面试题,我想说的是:发送两次请求的情况确实存在,但这与你所使用的是不是http协议,所采用的是不是fetch真的没有一毛钱关系! 接下来, ...
- 前端面试题-JavaScript篇
web前端面试题 JavaScript篇 1.JavaScript的数据类型都有哪些(8条)? ES5中有6种:Number.String.Boolean.Undefined.Null.Object ...
- Web前端面试题集锦
Web前端面试题集锦 前端开发面试知识点大纲: 注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 H ...
- 吐血熬夜整理!2020最全web前端面试题!!!你想要的我这都有!!!
吐血总结了下web前端面试题,分享给大家,以后还会持续更新,有些题目有多种答案,本文只给出其中一种,哪里有问题的欢迎指出. Html&CSS 1.谈谈你对web标准的理解 web标准的理解 2 ...
- web前端面试题(附答案)
web前端面试题 1.src和href的区别 ? href: Hypertext Reference的缩写,超文本引用,多数用于a link 标签 看下图 加载他们的时候 不会停止对当前页面的加载 浏 ...
- 史上最全的web前端面试题汇总及答案1
小编推荐:Fundebug提供JS错误监控.微信小程序错误监控.微信小游戏错误监控,Node.j错误监控和Java错误监控.真的是一个很好用的错误监控费服务,众多大佬公司都在使用. 很早之前就在看we ...
- 最新web前端面试题大全
私信发送pdf手册版 1 | 前端基础 1.1 | HTTP/HTML/浏览器 说一下 http 和 https 参考回答: https 的 SSL 加密是在传输层实现的. (1)http 和 h ...
- 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上
引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
最新文章
- 为什么高手都懂得拆解目标?
- 女朋友求爱c语言程序,[转载]一个程序员写的求爱程序
- Vaughn Vernon谈当今软件开发所面临的挑战
- 双11背后的技术力量,阿里云神龙治愈云计算阿克琉斯之踵
- mysql 约束 域_MySQL-约束
- 谁动了我的工作效率?大咖分享融合通信背后的技术案例
- SAP Cloud for Customer里的ticket回复UI的实现
- 数据库-几个重要的数据库相关概念
- JDBC上传文件存入BLOB字段
- Java连接数据库代码
- Hpool哈池靠谱吗?-Hpool矿池的罪与罚-除了hpool还有什么矿池?
- CodeForces - 1169D : Neko Performs Cat Furrier Transform(思维)
- JS事件冒泡浏览器兼容
- Adobe InDesign繁体字转简体字
- 只有VOB文件也可以制作成DVD——用IfoEdit建立IFO篇(最好的方法)
- The Innovation | 用系统生物学的观点鸟瞰肿瘤易感基因
- 机载激光雷达测量技术理论与方法读书笔记(3)机载激光雷达测量数据的滤波分类
- WATCHMEN 守望者,好看。
- 排位赛三B. Loan Repayment
- 车联网V-2X智能汽车驾驶
热门文章
- MAPI,SAPI,and TAPI Developer's Guide(NO.1)
- 红岩网校运维安全部二进制安全方向冬季考核:Winter_Task
- CSS外边距叠加问题
- 如何记住使用Google Assistant停在哪里
- Lens 创建 Service Accounts 及分配权限
- Visual Studio使用技巧
- PCB铜箔厚度单位为什么是盎司(OZ)?
- 钉钉消息防撤回功能研究与实现-可查看历史消息[文件/图文/管理员/链接 撤回拦截]
- 08 | 事务到底是隔离的还是不隔离的?
- Qt Linux系统使用QBreakpad实战