Redirect is not allowed for a preflight request 跨域问题的一个解决思路

一、前置知识

首先,我们应当明确一下这个报错究竟是什么问题

当我们需要跨域(当两个页面的协议,主机和端口号有任意一个不相同时)请求资源,且为非简单方法(比如方法为HEAD、GET、POST之外)时,会向服务器发送预检请求。
预检请求方法为OPTIONS,用来检测服务器所支持的请求方法。在预检请求时,不会携带自定义的请求头信息,而且不允许重定向。

了解更多关于跨域,可以看阮一峰大佬的博客
https://www.ruanyifeng.com/blog/2016/04/cors.html

如果进行了重定向,那么就会出现Redirect is not allowed for a preflight request报错。

二、问题背景

今天在进行项目部署的时候,出现了这个问题,最神奇的有两点:

  • 在使用不同的浏览器访问时,有些浏览器可以访问,有些则不行
  • 浏览器直接访问对应的接口可以正常访问,而从那个页面进去就不行

三、原因

我们项目是前后端分离项目,包含两个模块,模块一包含三个子部分的前端加一个后端。模块一的三个前端模块一部分使用了http,一部分使用了https,后端模块则是同时可以使用http、https。

问题原因来了

当我们访问了使用https的页面,由于混合内容问题,所以只能调https的后台,此时我的A浏览器记录了这个https后台的地址。然后我进入http页面,这个页面用http协议调的是https的后端。
此时,触发了HSTS,http页面会将发送的http请求,重定向为https请求,因此,出现了该错误

HSTS 是 HTTP 严格传输安全(HTTP Strict Transport Security) 的缩写,是一种网站用来声明他们只能使用安全连接(HTTPS)访问的方法,详情可见下面这个链接
https://zhuanlan.zhihu.com/p/130946490

那么,为什么会表现为某些浏览器可以访问,而某些浏览器不能访问呢?

原因在于,当我们第一次访问某个网站时,并不会触发HSTS,可以理解为一种缓存,因为我使用过浏览器A进入过https的页面,相应的域名进入了HSTS 预加载列表,所以对应的http页面的后台请求会被转为https,出现跨域重定向问题。而使用浏览器B直接进入那个页面时,由于浏览器B的预加载列表没有记录,因此不会出现重定向问题

四、解决办法

指标不治本的办法是,在HSTS缓存中删除对应的域名。
Chrome内核的浏览器可以访问chrome://net-internals/#hsts
在这里插入图片描述
Delete domain security policies中输入对应域名,点击delete,即可正常访问。

但是这种方法是治标不治本的,最终的解决办法还是将你的后台统一为http或者https。

posted @ 2024-04-24 15:56  狂客  阅读(355)  评论(0编辑  收藏  举报