前后端分离开发部署的跨域问题

第一种：利用jsonp来解决跨域请求

    这种方式本质上是利用html标签的src属性去实现，但这种方式有一定的局限性。因为src加载资源是GET请求，一些POST请求无法实现，如上传文。当然上传文件也可以通过Base64编码转化成字符串，然后再拼接到URL上，但URL长度是有限制的，所以一些大文件是无法通过这种方式来解决

 

第二种：利用中间件（如nginx）进行代理转发

    如下图：

这样的话 对于浏览器来说，就是同一个域，也就不存在跨域的问题了。当然如果代理使用nginx的话，完全可以将静态资源直接发布至nginx。

    这种架构优势在于 

    1、开发的时候完全可以不考虑跨域的问题

    2、流量有统一的入口，可以统一进行的流量管理

    劣势在于 ： 代理服务器流量压力较大

 

第三种：通过设置响应头信息，解决跨域问题：

在跨域请求的时候，浏览器会先发送一个OPTION请求，该OPTION请求用于获取目的资源所支持的通信选项，所以可以针对OPTION请求设置一个过滤器，在过滤器中直接设置响应头如下

public class CrosFilter implements Filter {


	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain         
        chain)
			throws IOException, ServletException {
		HttpServletResponse httpResponse = (HttpServletResponse) response; 
		HttpServletRequest httpRequest = (HttpServletRequest) request; 
		if (httpRequest.getMethod().equals(RequestMethod.OPTIONS.name())) { 
			setHeader(httpRequest,httpResponse); 
			return; 
		} 
		chain.doFilter(request, response);
	}

	/**
     * 为response设置header，实现跨域
     */ 
	private void setHeader(HttpServletRequest request,HttpServletResponse response){
		//跨域的header设置 
		response.setHeader("Access-control-Allow-Origin", request.getHeader("Origin"));
		response.setHeader("Access-Control-Allow-Methods", request.getMethod()); 
		response.setHeader("Access-Control-Allow-Credentials", "true");
		response.setHeader("Access-Control-Allow-Headers", request.getHeader("Access- 
            Control-Request-Headers"));
		response.setStatus(HttpStatus.OK.value()); 
		}

}

前台页面用ajax异步请求的时候 注意要加上 xhrFields:{withCredentials:true} 参数，因为异步请求时js对象发起请求，默认情况是不保存cookie的，加上这个参数，可以让浏览器保存cookie