2021-09-13 一文解析前端请求307导致CORS跨域失败

Posted 2023-03-09

参考技术A 公司的系统偶尔会出现跨域错误，同事们的解决方法一般是清空浏览器缓存即可解决。大家一直都觉得很奇怪，但因为是偶发事件都不太关注。最近，经过一些资料搜索和努力排查，终于明白了是怎么回事

根据现象可以发现：

返回头:

先说结论：
-- 原因是浏览器在发送http请求时自动进行307内部跳转，导致了跨域预检失败。
-- 为什么会307内部跳转呢？ 是因为浏览器采用HSTS(HTTP Strcit-Transport-Securit)策略，将所有非http的请求内部跳转成https。
-- 为什么浏览器认为这个域名需要采用HSTS策略呢？因为服务端/nginx返回的http请求header里配置了Strict-Transport-Security(严格传输安全)选项。

现代浏览器和服务器都开始支持 HSTS(HTTP Strict Transport Security) 功能，即自动将不安全的 HTTP 请求使用 307 Internal Redirect 跳转到 HTTPS 请求。这是由Chrome内部HSTS缓存导致的。Chrome 会自动记住每个域的 HSTS 设置，也就是说HSTS只要在理论上的第一次暴露后，后来就不经网页服务器返回，浏览器会查询本地数据，直接伪造 HSTS 307 跳转到安全的 HTTPS，以此来加强网络访问的安全性。

问题是，是谁告诉浏览器这么做的呢？
原因是在nginx配置中有这么一段：

浏览器接到这样的回复头:

这里意思是通知浏览器，访问的这个域名需要采用HSTS策略，并且过期时间是31622400秒(一年)，在这一年中都需要使用HSTS策略，意味着发起http请求时，浏览器都会强行进行307内部跳转。

然后因为307跳转被cors预检请求认为是不合法的，故此预检失败：

将: add_header Strict-Transport-Security max-age=31622400
改为: add_header Strict-Transport-Security max-age=0;