HSTS 307重定向跨域问题

最近做项目碰到一个奇怪的问题,我的电脑上可以正常访问,同事的电脑上访问出现跨域错误。本地启动一个node服务发送Ajax请求服务端接口,因为是跨域访问,浏览器发送一个OPTIONS请求服务端是否允许当前域名访问,浏览器使用307重定向把http请求转成了https,造成请求数据失败。如下图
在这里插入图片描述
然后各种搜索引擎找了一遍,也没有找到具体怎么解决的方法。以下是我使用的方法
1.了解跨域访问
关于跨域访问可以参考阮一峰老师的博客,里面写的很详细
http://www.ruanyifeng.com/blog/2016/04/cors.html
2.了解HSTS
HSTS(HTTP Strict Transport Security)。它告诉浏览器只能通过HTTPS访问当前资源,而不是HTTP。
3.spring-boot配置允许跨域访问
使用Filter配置

public class CorsFilter implements Filter {
	@Override
	public void init(FilterConfig filterConfig) throws ServletException {

	}

	/*跨域请求配置*/
	@Override
	public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
		HttpServletResponse response = (HttpServletResponse) res;
		HttpServletRequest reqs = (HttpServletRequest) req;
		// 服务端允许访问的域名
		response.setHeader("Access-Control-Allow-Origin","*");
		// 服务端接受跨域带过来的Cookie,当为true时,origin必须是明确的域名不能使用*
		response.setHeader("Access-Control-Allow-Credentials", "true");
		// 服务端允许访问Http Method
		response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
		// 跨域请求中预检请求(Http Method为Option)的有效期,20天,单位秒
		response.setHeader("Access-Control-Max-Age", "5000");
		// 表明它允许跨域请求包含的头
		response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,Authorization,Token");
		chain.doFilter(req, res);
	}

使用WebMvcConfigure配置

@Configuration
public class MvcConfigurer extends WebMvcConfigurerAdapter implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedHeaders("*")
                .allowedOrigins("*")
                .allowedMethods("GET","POST","PUT","DELETE","HEAD","OPTIONS")
                .allowCredentials(true)
                .exposedHeaders("Access-Control-Allow-Origin","Access-Control-Allow-Credentials", HttpHeaders.SET_COOKIE)
                .maxAge(3600L);
    }
}

4.将nginx中配置的Strict-Transport-Security 注释
server {
listen 443 ssl;
server_name www.example.com;
#add_header Strict-Transport-Security "max-age=31536000;
}
重新加载nginx 配置文件,再次访问还是跟之前一样的效果,因为HSTS配置的有效期为一年,需要等过期之后才能生效。
查看chrome浏览器的HSTS,在浏览器输入
chrome://net-internals/#hsts,将访问的域名从HSTS中删除
在这里插入图片描述
再次在chrome中访问,之前的307重定向没有了,模型展示效果如下图
在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章