最近做项目碰到一个奇怪的问题,我的电脑上可以正常访问,同事的电脑上访问出现跨域错误。本地启动一个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重定向没有了,模型展示效果如下图