理论与实践相结合彻底理解CORS( 三 ) _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相等的时候，预检请求才会通过，后续请求才会发出，从而达到了该实验的实验目的三。

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