java前后端跨域问题的解决方案

跨域问题的分析：

      1.同源策略

协议相同，
域名相同，
端口相同

这三者有一点不同则为不同源。

2.同源策略限制

（1） Cookie、LocalStorage 和 IndexDB 无法读取。

（2） DOM 无法获得。

（3） AJAX 请求不能发送

 

3.解决方案

3.1 JSONP

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。

它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

首先，网页动态插入<script>元素，由它向跨源网址发出请求

function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}
 
window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}
 
function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};

前端代码ajax,jsonp测试

后端响应前端jsonp

3.2 WebSocket

WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

3.3CORS

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。

当然更高级的做法是

创建跨域拦截器实现HandlerInterceptor接口，并实现其方法，在请求处理前设置头信息，并放行

 拦截器拦截所有文件

4.前后端分类项目跨域问题

      目前前后端分离的项目越来越多，细化趋势也是越来越明显，笔者目前在做就是一个纯前后端分离的项目，前端使用vue+element+webpack,后端使用springcloud全家桶，开发环境下由于前端通过 nodejs 来运行，后端使用内置的tomcat容器运行，当然在生产环境完全可以将前端打包编译好的css,js，html文件放到后端静态目录下。所以生产环境下可以不存在跨域问题，我这里解决的是开发环境下的跨域问题。

ngnix

结合 Nginx 来部署前后端分离项目算是目前的主流方案。一来部署方便，二来通过动静分离也可以有效提高项目的运行效率。

大家知道我们项目中的资源包含动态资源和静态资源两种，其中：

    动态资源就是那些需要经过容器处理的资源，例如 jsp、freemarker、各种接口等。
   静态资源则是那些不需要经过容器处理，收到客户端请求就可以直接返回的资源，像 js、css、html 以及各种格式的图片，都 属于静态资源。
将动静资源分开部署，可以有效提高静态资源的加载速度以及整个系统的运行效率。

在前后端分离项目部署中，我们用 Nginx 来做一个反向代理服务器，它既可以代理动态请求，也可以直接提供静态资源访问.