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

2018-01-15 14:13:23 +08:00
 053700

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

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

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

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

#201

3355 次点击
所在节点    问与答
8 条回复
053700
2018-01-15 14:14:40 +08:00
另外补充一点我的浏览器是 Chrome 63
serco
2018-01-15 14:24:08 +08:00
明明返回的 404,options 请求就出错了,压根没有到你的处理逻辑。查查看后端的 routes 配置吧
另外这种情况下不会到 then 的,直接检查 response.ok
cloudzqy
2018-01-15 14:28:09 +08:00
跟 401 没关系,压根就没请求成功。
页面是 3000 端口,请求是 3001,我猜是 CORS ?
053700
2018-01-15 14:29:29 +08:00
@cloudzqy 是的,是跨域请求。另外这个 404 是我刚改的,等我改回来重新截图。
053700
2018-01-15 14:29:53 +08:00
@serco 这个 404 是我刚改的,我改回来重新截图
gongpeione
2018-01-15 14:32:07 +08:00
你这是断在了预检了
053700
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
2018-01-15 14:44:30 +08:00
@gongpeione 搞定了,感谢 dalao 指点,因为跨域的 OPTIONS 预检请求被拦截导致后面的请求无法发起,所以直接抛了异常,在后端拦截器位置放通所有 OPTIONS 方法的请求,就可以正确发起请求然后获取响应体了。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/423018

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX