前后端分离如何解决跨域请求！

user-register.html:1 Failed to load http://localhost:8080/user/get_user_info:
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8088' is therefore not allowed access. The response
had HTTP status code 405.

背景

用SSM框架实现后台，部署在Tomcat上，通过localhost：8080访问；前端用npm+webpack开发，假设前端页面启动的地址是：localhost：8089。因为前后端的运行环境的端口不一样，所以当前端访问后台的数据时，会出现跨域问题。

---

产生跨域的原因

1. 浏览器出于安全性的限制：浏览器有同源策略，不允许Ajax访问其他域接口；
2. 跨域：HTTP协议，域名，端口这三个有一个不同就是算是跨域啦；
3. 发出的请求是XHR(XMLHttpRequest)请求。

补充有三个HTML标签l浏览器是允许跨域加载资源的

1. img
2. link
3. script

---

解决方法

解决办法1（让 服务器端（后端） 支持跨域）:设置Http hader

在Springx添加一个自己编写过滤器类CoreFilter，并且在Webxml里.配置
该类的作用就是往reponse（响应对象）的头部添加信息。

package com.mark.o2o.util;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Component;

@Component
public class CoreFilter implements Filter{

	@Override
	public void destroy() {
		// TODO Auto-generated method stub

	}

	@Override
	public void doFilter(ServletRequest req, ServletResponse res,
			FilterChain chain) throws IOException, ServletException {
		HttpServletResponse response = (HttpServletResponse)res;
		response.setHeader("Access-Control-Allow-Origin", "*");  //允许的域名
		response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
		response.setHeader("Access-Control-Max-Age", "3600");  
		response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");  
		chain.doFilter(req, res); 

	}

	@Override
	public void init(FilterConfig arg0) throws ServletException {
		// TODO Auto-generated method stub

	}

}

web.xml配置

<filter>
	 <filter-name>cors</filter-name>
	 <filter-class>com.mark.o2o.util.CoreFilter</filter-class>
</filter>
<filter-mapping>
	 <filter-name>cors</filter-name>
	 <url-pattern>/*</url-pattern>
</filter-mapping>

解决办法2：

用抓包工具进行转发

解决办法3：调用方设置代理

1.JSONP
2.webpack设置代理
在webpack中webpack.config文件中设置代理（首先你要安装webpack-dev-server模块）

devServer: {
        port: 8088,
        inline: true,
        proxy : {
            '**/*.do' : {
                target: 'http://localhost:8080',
                changeOrigin : true
            }
        }
    }