前后端分离解决跨域问题

随着前后端分离开发的越来越普及，会经常遇到跨域的问题，最近在项目中遇到了跨越的问题。

SpringBoot解决跨域的几种办法

方法一：

SpringBoot给我们提供了一个注解可以通过添加注解@CrossOrigin来解决跨域问题，该注解可用在方法或类上面。

方法二：

这里可以通过实现WebMvcConfigurer接口中的addCorsMappings()方法来实现跨域。

@Configuration class CORSConfiguration implements WebMvcConfigurer { @Override public void queryCorsMappings(CorsRegistry registry) { registry.addMapping("/**"); } }

方法三：

通过实现Fiter接口在请求中添加一些Header来解决跨域的问题。

@Component public class CORSFilter implements Filter { @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletResponse res = (HttpServletResponse) response; res.addHeader("Access-Control-Allow-Credentials", "true"); res.addHeader("Access-Control-Allow-Origin", "*"); res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT"); res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN"); if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) { response.getWriter().println("ok"); return; } chain.doFilter(request, response); } @Override public void destroy() { } @Override public void init(FilterConfig filterConfig) throws ServletException { } }

Nginx配置解决跨域问题（扩展）

如果我们在项目中使用了Nginx，可以在Nginx中添加以下的配置来解决跨域（原理其实和Filter类似，只不过把活儿丢给了运维）

location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS; if ($request_method = 'OPTIONS') { return 204; } }