前后端分离的跨域解决方案

声明：

在以往的开发中，前后端分离也不是像现在这么热门，所谓的前端工程师也只不过是写好静态页面由Java工程师或者php工程师嵌入到页面中进行开发，这或许加重了这些工程师的工作量，而且在样式调试上由纯html代码到jsp，asp，php调试起来要两个工程师一起商量着找问题，解决起来成本也很高。前后端分离，前端工程师不仅仅要负责展现，而且要编写相应的代码使得dom渲染，网络交互都focus在前端工程师这里。这样服务器端工程师则更加有精力来维护代码的逻辑性，事务性，性能等。是啊，技术框架百花齐放的今天，前端也要mvc了。angular，vue等。下面我将自身实践简述如何解决跨域问题

跨域问题简述（引用网络上比较清晰的阐述表格）

第一种解决方案jsonp(不推荐使用)

这种方案其实我是不赞同的，第一，在编码上jsonp会单独因为回调的关系，在传入传出还有定义回调函数上都会有编码的”不整洁”.简单阐述jsonp能够跨域是因为javascript的script标签，通过服务器返回script标签的code，使得该代码绕过浏览器跨域的限制。并且在客户端页面按照格式定义了回调函数，使得script标签返回实现调用

第二种方案，反向代理(推荐使用)

代理访问其实在实际应用中有很多场景，在跨域中应用的原理做法为：通过反向代理服务器监听同端口，同域名的访问，不同路径映射到不同的地址，比如，在nginx服务器中，监听同一个域名和端口，不同路径转发到客户端和服务器，把不同端口和域名的限制通过反向代理，来解决跨域的问题，案例如下：

server {listen       80;server_name  domain.com;#charset koi8-r;#access_log  logs/host.access.log  main;location /client { #访问客户端路径proxy_pass http://localhost:81;proxy_redirect default;}location /apis { #访问服务器路径rewrite  ^/apis/(.*)$ /$1 break;proxy_pass   http://localhost:82;}
}

第三种方案在server设置header

通过设置server的header来设置浏览器对于服务器跨域的限制，具体实现如下:

//统一过滤器设置
public class DomainFilter  implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic 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.addHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");chain.doFilter(req, res);}@Overridepublic void destroy() {}
}//spring boot过滤器设置@Beanpublic FilterRegistrationBean filterRegistrationBean() {FilterRegistrationBean registrationBean = new FilterRegistrationBean();DomainFilter domainFilter = new DomainFilter();registrationBean.setFilter(domainFilter);List<String> urlPatterns = new ArrayList<String>();urlPatterns.add("/*");registrationBean.setUrlPatterns(urlPatterns);return registrationBean;}

                 <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-7b4cdcb592.css" rel="stylesheet"></div>