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

1.什么是前后端分离?

前端: ajax从服务器获取到数据之后 , 只负责页面的展示.
后端: 只负责将json数据回传到客户端,展示跟自己无关.

2.什么是跨域问题?

跨域: 浏览器从一个域名的网页去请求另一个域名的资源时.

例: // 协议+主机名+端口号任一不相同!
     www.baidu.com    - >    api.baidu.com
     www.baidu.com    - >    tieba.baidu.com
     www.baidu.com:80 - > www.baidu.com:8080

跨域问题:
       javaScript使用ajax请求进行跨地址请求 , 无法返回json数据.

跨域问题来源:
      JavaScript的同源保护策略，即只有协议+主机名+端口号相同，则允许相互访问。
      也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。

3.跨域问题的解决.

跨域的解决问题分为前后端两部分:

前端解决: 
    $.ajax({
			url : 'http://remote.domain.com/corsrequest',
			data : data,
			dataType: 'json',
			type : 'POST',
			xhrFields: {
			    //允许接受从服务器端返回的cookie信息 ,默认值为false 
			    withCredentials: true
			},
			success:function(data,statuscode,xhr){
				//业务逻辑
			}
	});

后端解决: 
   		HttpServletResponse response= (HttpServletResponse) resp;
   		HttpServletRequest request= (HttpServletRequest) req;
   		
        /*
            第一种方式:
                 获取请求头中的 Origin请求头 , 允许当前访问的域名跨域访问!
         */
   		String origin = request.getHeader("Origin");
   		response.setHeader("Access-Control-Allow-Origin",origin);
   		
   		/*
            第二种方式:
                 直接设置允许访问的域名网站 , 允许它访问!
         */
   		response.setHeader("Access-Control-Allow-Origin","http://www.aaa.com:8020");

在这里插入图片描述

//允许设置cookie
response.setHeader("Access-Control-Allow-Credentials","true");

//以上两者都设置才可以保证我们外部域的ajax请求正常访问 包括设置cookie

因为每次都要设置 , 所以可以编写一个允许跨域访问的filter:

扫描二维码关注公众号，回复： 4147421 查看本文章

CORSFilter.java

// 过滤所有的访问路径 .
@WebFilter("/*")
public class CORSFilter implements Filter {
    public void destroy() {
    }

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        HttpServletResponse response= (HttpServletResponse) resp;
        HttpServletRequest request= (HttpServletRequest) req;

        // 允许浏览器跨域进行访问 .
        String origin = request.getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin",origin);
        
        //允许你访问我
        //response.addHeader("Access-Control-Allow-Origin","http://www.itheima325.com:8020");
        // 允许浏览器保存cookie信息. 
        response.setHeader("Access-Control-Allow-Credentials","true");
		// 放行.
        chain.doFilter(req, resp);

    }

    public void init(FilterConfig config) throws ServletException {

    }

}

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

猜你喜欢