解决前后端分离时跨域问题

       前后端分离后，经常会有session ID 不一致，被拒绝访问，等等一些令人恶心的报错，当然了还要考虑一个因素就是谷歌浏览器版本的问题，这也是今天一个朋友他跨域时session ID一直对应不上才发现的一个问题，今年5月份的时候谷歌更新禁止了请求头对cookie的设置，迫使了我们不得不适用nginx来进行前后端分离的操作，劝慰大家不要想着我还有Edge呀，Edge就是换个了皮的谷歌（版本过早的谷歌还是可以正常使用的）。

具体配置

首先在你的demo里我们要配置一个类：跨域访问时的处理

package com.gg.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.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Component;


@Component
public class CORSFilter implements Filter {

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {

	}

	@Override
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
			throws IOException, ServletException {

		HttpServletRequest request = (HttpServletRequest) servletRequest;
		HttpServletResponse response = (HttpServletResponse) servletResponse;
		response.setContentType("textml;charset=UTF-8");
		response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
		response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
		response.setHeader("Access-Control-Max-Age", "0");
		response.setHeader("Access-Control-Allow-Headers","Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
		response.setHeader("Access-Control-Allow-Credentials", "true"); // 是否支持cookie跨域
		response.setHeader("XDomainRequestAllowed", "1");
		response.setHeader("Set-Cookie", "HttpOnly;Secure;SameSite=None");
		filterChain.doFilter(servletRequest, servletResponse);

	}

	@Override
	public void destroy() {

	}

}

创建一个类，用于初始化时，将我们之前的配置类注入ben，加入@Configuration注解，@EnableCaching是用于缓存的可以忽略，该类之前是用于二级缓存使用的（忽略类名）

 在CacheConfig类里加入以下代码，直接引用之前的配置类

@Resource
	private CORSFilter corsFilter;

	@Bean
	public FilterRegistrationBean registerAuthFilter() {
		FilterRegistrationBean registration = new FilterRegistrationBean();
		registration.setFilter(corsFilter);
		registration.addUrlPatterns("/*");
		registration.setName("authFilter");
		//值越小，Filter越靠前过滤
		registration.setOrder(1);
		return registration;
	}

后台配置完毕后我们转向与js,在ajax里加入xhrfields:{withCredentials:true}设置跨域请求时带上cookie，请求带上要访问地址和端口号

 $.ajax({
                async:true
				,xhrFields: {
				        withCredentials: true
				    }
                ,url:"http://localhost:8080/user/login"
                ,data:$("#loginForm").serialize()
                ,type:"post"
                ,success:function (data){}

              })

不需要用到nginx的以上步骤就结束了

Neginx配置

Nehinx其实不需要配置什么东西，有一点需要注意的就是路径不可有中文

（resources,html,static,web,这几个是我不同前端的静态资源，忽略即可，可自行创建文件夹不可中文）

 解压好后进入conf文件里

有一个nginx.conf文件可自行配置

 

注：更改一次配置文件就需要重启一次nginx否则运行的一直是之前的配置文件，先关闭在开启。

将一下代码复制到配置文件里就ok了，这个配置过后上面说的demo配置的实现filter的CORSFilter类就不需要再配置了只需要在每一个controller层配置@CrossOrigin注解就好

		location / {
              # 允许跨域请求的“域”
              add_header 'Access-Control-Allow-Origin' $http_origin;
              # 允许客户端提交Cookie
              add_header 'Access-Control-Allow-Credentials' 'true';
              # 允许客户端的请求方法
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
              # 允许客户端提交的的请求头
              add_header 'Access-Control-Allow-Headers' 'Origin, x-requested-with, Content-Type, Accept, Authorization';
              # 允许客户端访问的响应头
              add_header 'Access-Control-Expose-Headers' 'Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma';
              # 处理预检请求
              if ($request_method = 'OPTIONS') {
                # 预检请求缓存时间
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
              }
              
               proxy_pass http://tomcats; #自行配置想叫啥叫啥 必须与上面的 upstream后面的名字一样
               proxy_set_header Host $host;
              proxy_set_header X-Real-IP $remote_addr;
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_set_header X-Forwarded-Proto $scheme;
              
              proxy_connect_timeout 600;
              proxy_read_timeout 600;
              
		  }

配置好后只需点击 nginx.exe运行就好

附上一些简单的nginx操作命令

--查看ngnix运行列表
tasklist /fi "imagename eq nginx.exe" 
--快速关闭
nginx -s stop
--完整有序的停止nginx
nginx -s quit