V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
053700
V2EX  ›  问与答

用浏览器原生的 fetch API 发起 XHR 请求,服务端返回 401 状态码,前端 fetch 直接抛出异常不走 resolve

  •  
  •   053700 · 2018-01-15 14:13:23 +08:00 · 3361 次点击
    这是一个创建于 2504 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在浏览器中使用 fetch 的时候,后端因为用户没有认证,返回一个 401 状态码和一些信息,本来打算在 fetch 的 then 里,通过判断 response 的 status 来做区别处理,结果实际情况是,浏览器在发起 fetch 请求后因为返回的状态码是 401,判断请求失败抛了异常,我带着返回内容的响应体和响应状态码全都没了,用.catch()捕获的参数只有一个 TypeError,包含的内容非常有限。

    按照网上各路 dalao 的教程来说,应该就算是状态码是 401,但是仍然收到了完整的响应,应该会拿到完整的响应对象的,但是实际上并不是这样。

    h2At.png

    这里我尝试打印响应对象,但是并没有执行 then 里的逻辑,而是走了 reject,回调方法的参数是一个 TypeError。

    还有一些我看不懂的 dalao 们的讨论

    #201

    8 条回复    2018-01-15 14:44:30 +08:00
    053700
        1
    053700  
    OP
       2018-01-15 14:14:40 +08:00
    另外补充一点我的浏览器是 Chrome 63
    serco
        2
    serco  
       2018-01-15 14:24:08 +08:00
    明明返回的 404,options 请求就出错了,压根没有到你的处理逻辑。查查看后端的 routes 配置吧
    另外这种情况下不会到 then 的,直接检查 response.ok
    cloudzqy
        3
    cloudzqy  
       2018-01-15 14:28:09 +08:00
    跟 401 没关系,压根就没请求成功。
    页面是 3000 端口,请求是 3001,我猜是 CORS ?
    053700
        4
    053700  
    OP
       2018-01-15 14:29:29 +08:00
    @cloudzqy 是的,是跨域请求。另外这个 404 是我刚改的,等我改回来重新截图。
    053700
        5
    053700  
    OP
       2018-01-15 14:29:53 +08:00
    @serco 这个 404 是我刚改的,我改回来重新截图
    gongpeione
        6
    gongpeione  
       2018-01-15 14:32:07 +08:00
    你这是断在了预检了
    053700
        7
    053700  
    OP
       2018-01-15 14:34:06 +08:00
    重新补图,这里是后端处理逻辑:

    ![hQe4.png]( https://img.cdn.lwl12.com/images/2018/01/15/hQe4.png)

    这里是抛异常的地方

    ![hpgU.png]( https://img.cdn.lwl12.com/images/2018/01/15/hpgU.png)

    这里是请求信息

    ![hzI7.png]( https://img.cdn.lwl12.com/images/2018/01/15/hzI7.png)

    这里是响应正文,里面有我放的一行字

    ![h9FL.png]( https://img.cdn.lwl12.com/images/2018/01/15/h9FL.png)
    053700
        8
    053700  
    OP
       2018-01-15 14:44:30 +08:00
    @gongpeione 搞定了,感谢 dalao 指点,因为跨域的 OPTIONS 预检请求被拦截导致后面的请求无法发起,所以直接抛了异常,在后端拦截器位置放通所有 OPTIONS 方法的请求,就可以正确发起请求然后获取响应体了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1035 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:33 · PVG 03:33 · LAX 11:33 · JFK 14:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.