跨域问题出现的原因
- 浏览器都是基于同源协议的
- 同源政策的目的:是为了保证用户信息的安全,防止恶意的网站窃取数据。
- 同源协议是指:
- 协议相同
- 域名相同
- 端口相同 - 同源协议造成的问题:
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 无法获得
- AJAX 请求不能发送
前后端分离跨域问题的解决方法
基于nginx正向代理解决
server{
listen: 80
server_name: localhost
location / {
root: html;
index index.html index.htm;
proxy_pass http://localhost:8081;
}
localtion /Auth {
proxy_pass http://localhost:8080;
}
}
cors方式
使用filter
@Component
public class CrossFilter implements Filter{
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
System.out.println("this is cross filter");
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Max-Age", "1728000");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
chain.doFilter(req, res);
}
@Override
public void destroy() {
}
使用切面
public class ControllerAOP {
public Object testAop(ProceedingJoinPoint pro) throws Throwable {
System.out.println("=====================");
HttpServletResponse response = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getResponse();
response.setHeader("Access-Control-Allow-Origin", "*");
Object proceed = pro.proceed();
return proceed;
}
}