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



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

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

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

文章插图
 
响应头内容

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

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

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

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

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

文章插图
 
请求头信息为

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

文章插图
 
响应头信息为

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

文章插图
 
通过该实验证明只有
Access-Control-Request-Headers与Access-Control-Allow-Headers相等的时候,预检请求才会通过,后续请求才会发出,从而达到了该实验的实验目的三 。




推荐阅读