web前端面试题对答篇：HTTP fetch发送2次请求的原因？

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—————
分享结束！喜欢本文的朋友们，欢迎关注公众号 张培跃，收看更多精彩内容，谢过！！

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,098评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,213评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,960评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,519评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,512评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,533评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,914评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,574评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,804评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,350评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,933评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2赞 342