Javaweb 项目前后端分离跨域问题

我会带着你远行 2022-01-26 16:09 426阅读 0赞

### 一、什么是跨域： ###

从一个网站请求另一个网站，请求的地址中  ip，端口，协议三个任意一个有变化都属于跨域请求。

### 二、跨域请求在Javaweb项目中会出现什么问题 ###

前后端分离项目中，前端和后台服务可能不部署在一台服务器上，当然也有可能部署在一台服务器，但无论怎么部署，只要前端的项目没有和后台服务在一个Javaweb项目中，那么都是跨域，首先部署不再同一台服务器，那么IP肯定是不一样的，属于跨域，部署在同一个服务器中，此时前端需要起一个服务把前端项目启动起来，后端起一个服务把后端项目启动起来，此时端口肯定不能一样，一样就冲突了，所以端口不同属于跨域（开始认为部署在同一个服务器上不是跨域，后来发现搞错了，还是跨域）。

跨域问题不解决，会产生前端请求状态时200，但一直处于timering状态，没有数据返回。

### 三、跨域解决方案（参考：[https://www.cnblogs.com/binbang/p/5553701.html][https_www.cnblogs.com_binbang_p_5553701.html] 实际项目中已验证过）： ###

1.http请求头

Origin: 普通的HTTP请求也会带有，在CORS中专门作为Origin信息供后端比对,表明来源域。

Access-Control-Request-Method: 接下来请求的方法，例如PUT, DELETE等等

Access-Control-Request-Headers: 自定义的头部，所有用setRequestHeader方法设置的头部都将会以逗号隔开的形式包含在这个头中

2.http响应头

然后浏览器再根据服务器的返回值判断是否发送非简单请求。简单请求前面讲过是直接发送，只是多加一个origin字段表明跨域请求的来源。然后服务器处理完请求之后，会再返回结果中加上如下控制字段

Access-Control-Allow-Origin: 允许跨域访问的域，可以是一个域的列表，也可以是通配符"\*"。这里要注意Origin规则只对域名有效，并不会对子目录有效。即http://foo.example/subdir/ 是无效的。但是不同子域名需要分开设置，这里的规则可以参照同源策略

Access-Control-Allow-Credentials: 是否允许请求带有验证信息，

Access-Control-Expose-Headers: 允许脚本访问的返回头，请求成功后，脚本可以在

Access-Control-Max-Age: 缓存此次请求的秒数。在这个时间范围内，所有同类型的请求都将不再发送预检请求而是直接使用此次返回的头作为判断依据，非常有用，大幅优化请求次数

Access-Control-Allow-Methods: 允许使用的请求方法，以逗号隔开

Access-Control-Allow-Headers: 允许自定义的头部，以逗号隔开，大小写不敏感

### 实现方式： ###

1、后端Javaweb项目处理，添加过滤器，拦截请求，设置头部信息，如果是springboot项目，需要在启动类添加@ComponentScan。

@WebFilter(urlPatterns = "/*",filterName = "TimeFilter")
    public class HeaderFilter implements Filter {
        Logger logger = LoggerFactory.getLogger(this.getClass());
    
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
            logger.info("init======");
        }
    
        @Override
        public void doFilter(ServletRequest request, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
            logger.info("doFilter======");
            HttpServletResponse response = (HttpServletResponse) resp;
            response.setHeader("Access-Control-Allow-Origin", "*"); //解决跨域访问报错
            response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
            response.setHeader("Access-Control-Max-Age", "3600"); //设置过期时间
            response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization");
            response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP 1.1.
            response.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0. response.setHeader("Expires", "0");
            chain.doFilter(request, resp);
        }
    
        @Override
        public void destroy() {
            logger.info("destroy======");
        }
    }

2、nginx配置文件配置：

server \{

location / \{

if ($request\_method = 'OPTIONS') \{

add\_header 'Access-Control-Allow-Origin' '\*';

add\_header 'Access-Control-Allow-Credentials' 'true';

add\_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

add\_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

\# add\_header 'Access-Control-Max-Age' 3600;

add\_header 'Content-Type' 'text/plain charset=UTF-8';

add\_header 'Content-Length' 0;

return 200;