理论与实践相结合彻底理解CORS( 三 )

文章插图
可以看到本来打算发一次请求,但实际上发了两条,第一条是Options请求,第二条请求才是post请求,上述打印内容验证了实验目的中的一和二 。
- 下面继续深入思考,来看看预检请求的请求头和响应头
请求头内容

文章插图
响应头内容

文章插图
上述
Access-Control-Request-Headers与Access-Control-Allow-Headers一样,而且内容也正常返回了(步骤二中已经进行了展示),但是这不足以证明实验目的三,下面我们认为增加一条头信息再来看结果 。
- 人为增加一条请求头信息
index.html页面修改后如下
axios('http://127.0.0.1:8010', {method: 'post',headers: {'Content-Type': 'application/json','Test': 'test'},data: {name: 'dog'}}).then(console.log)
此时浏览器控制台报错了

文章插图
服务端只接收到了options请求

文章插图
请求头信息为

文章插图
响应头信息为

文章插图
通过该实验证明只有
Access-Control-Request-Headers与Access-Control-Allow-Headers相等的时候,预检请求才会通过,后续请求才会发出,从而达到了该实验的实验目的三 。
推荐阅读
- 韭菜子与杜仲功效,杜仲的功效杜仲主治功效与作用
- 喝雪菊茶的功效与禁忌,雪菊的功效与作用吃法
- 千日红禁忌,千日红的功效与作用及禁忌
- 合欢花与合欢米样吗,合欢米的功效与作用
- 银杏茶的功效与作用坏处,黄精银杏茶的功效与作用这几个作用你知道吗
- 四妙散的功效与作用是什么,普洱茶的功效与作用是什么
- 金盏花性味归经,人参泡水功效与作用有哪些
- 香薷佩兰茶的功效与作用,佩兰的功效与作用有
- 紫芽的功效和作用,小青柑白茶的功效与作用
- 人参乌龙茶的功效与作用,花旗参泡水喝的功效与作用