最近做項目碰到一個奇怪的問題,我的電腦上可以正常訪問,同事的電腦上訪問出現跨域錯誤。本地啓動一個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重定向沒有了,模型展示效果如下圖