前后端分离解决跨域的问题

跨域问题出现的原因

• 浏览器都是基于同源协议的
• 同源政策的目的：是为了保证用户信息的安全，防止恶意的网站窃取数据。
• 同源协议是指：
  - 协议相同
  - 域名相同
  - 端口相同
• 同源协议造成的问题：
  - Cookie、LocalStorage 和 IndexDB 无法读取
  - DOM 无法获得
  - AJAX 请求不能发送

前后端分离跨域问题的解决方法

基于nginx正向代理解决

server{
	listen: 80                                                     #监听的端口
	server_name: localhost                                         #ip地址
	
	location / {                                                   #监听80端口,所有请求都转发到8081的前端地址
			root: 	html;
			index   index.html  index.htm;
			proxy_pass  http://localhost:8081;                     #前端地址
	}
	
	localtion /Auth {                                              #配置后台数据的接口 所有/Auth的请求都转发到后台地址
				proxy_pass  http://localhost:8080;                 #后端地址
	}

}

cors方式

使用filter

/**
 * 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");
//        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
    }
 
    @Override
    public void destroy() {
 
    }

使用切面

/**
 * 后台解决跨域问题
 */
//@Configuration
//@Aspect
public class ControllerAOP {
 
//    @Around("execution (* com.hxl.site.modules..*.controller..*.*(..))")
    public Object testAop(ProceedingJoinPoint pro) throws Throwable {
 
        System.out.println("=====================");
        //获取response
        HttpServletResponse response = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getResponse();
        //核心设置
        response.setHeader("Access-Control-Allow-Origin", "*");
 
        //执行调用的方法
        Object proceed = pro.proceed();
        return proceed;
    }
}