一文领略状态码303与307之间的区别

hello大家好，我是小九九的爸爸。前两篇我们讲解了 301与302的区别，随后又讲解了 302与303的区别，这次呢，我们来讲解下 303与307之间的区别。

在上一篇文章中我们知道，303其实就是302的增强版本。303磨平了所有浏览器对302状态码处理的差异化。再来回顾下303是如何处理请求的。

无论是get请求还是post请求，无论是第一次请求老资源，还是n次以后请求老资源，都会经历 先请求老资源，然后再自动以get方式去请求新资源这个过程。
如果你是post请求，那么注意了，第二次自动跳转到新资源的时候，你的post请求体就会被自动忽略。

那其实说到这，很多小伙伴可能就一下子反应过来了，别急，下面有你们心里的答案。

307状态码

流程讲解

307 Temporary Redirect（临时重定向）。当服务器收到请求后，会告诉浏览器，此资源被分配到了一个新的URL下。随后浏览器会保持第一次请求的method与请求参数去访问最新的资源地址。

注意，上述的解释包含了 第一次请求 与 第二次请求的情况。

现在来明示一下工作流程：

点击一个按钮发送post请求去请求A地址，A地址响应307，并且告知新地址是B。
随后浏览器以相同的请求方式（在这里就是post请求）去请求地址B。如果第一次请求携带了body，那么这次请求也会带上请求体。
当再次请求A地址时，它还会去请求A，然后再请求B。

代码实践

怎么搭建前后端项目，这里不做解释，不知道的小伙伴看这篇文章一文领略状态码301与302的区别。

express后端新增路由如下：

node 复制代码

router.post('/307OldUrl', function(req, res, next) {
  res.redirect(307, '/users/307NewUrl')
});

router.post('/307NewUrl', function(req, res, next) {
  res.send('respond with a resource');
});

react前端新增一个按钮用来演示307状态码。

react 复制代码

// 其他代码都不变 ======
function Page(){
    
    // 发送307请求 ++++++++
    const send307Req = async () => {
        let result = await axios.create({
            baseURL: 'http://127.0.0.1:8888/'
        })
        .post('/users/307OldUrl', {
            firstName: 'Fred',
            lastName: 'Flintstone'
        })
        .then(function (response) {
            console.log('收到的响应:', response);
            return response
        })
        .catch(function (error) {
            console.log('响应出错了:', error);
            return error;
        });
        if (result.status == 200){
            message.success('收到了成功的响应!');
        }
        if (result.status != 200){
            message.error('请求地址404 ...');
        }
    }
    
    return  <button onClick={send307Req}>307</button>
}

export default Page;

分别启动前后端项目，然后在浏览器的地址栏里输入：http://localhost:3000/page，界面如下：

此时点击一下307按钮，我们来看下控制台：

总结

	是否会跳过老资源	请求新资源时的方法	请求新资源时是否会携带body
303	不会	get	不会
307	不会	跟第一次保持一致	会

最后

好啦，本期状态码的科普就结束啦，上述如果有表述有误的地方，欢迎各位大神指出，我们下期再见啦～～