跨域
1.1 什么是跨域
- 浏览器开启了安全模式
- 发送的请求必须是xhr(ajax)请求
- 要求请求发送方和请求接收方域不同(协议,IP,端口)
2.2 解决跨域的方案
- 让浏览器关闭安全模式:chrome.exe --disable-web-security --user-data-dir=D:\abaaba
- 伪装Ajax请求变为script请求:
- 再很久很久之前,一帮野生程序员为了解决跨域问题,采用了JSONP的方式,JSONP的方式就是将xhr请求类型悄悄滴替换为了Script请求,从而处理了跨域得问题,约定需要将响应的JSON数据存放到callback参数的函数参数中
/list?callback=jQuertk4j35h34kjhj5gjh5g345h34kj5h34jk5 jQuertk4j35h34kjhj5gjh5g345h34kj5h34jk5(JSON)
- 采用浏览器支持的同源策略,让浏览器认为请求获得数据是安全的,需要设置大量的响应头信息
- 再Controller类上添加注解:@CrossOrigin(allowCredentials = “true”)
- 构建过滤器(网关):
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
String origin = request.getParameter("origin");
if(origin != null){
response.setHeader("Access-Control-Allow-Origin", origin);
}
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
response.setHeader("Access-Control-Allow-Credentials", "true");
filterChain.doFilter(servletRequest, servletResponse);
}
- 可以后期采用Nginx帮我们解决跨域问题,Nginx可以同时代理静态HTML页面和Tomcat后台程序,统统第通过Nginx请求,就不存在跨域问题了。