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。