SpringBoot跨域支持配置

2019-01-11

现在越来越多的开发使用前后端分离开发模式、前后端分离部署方式等，那么前端跨域问题是一个非常常见的问题了。
后台代码可以支持跨域，针对SpringBoot来说，可以使用一下两种方式配置来支持，分别是：

方法一：使用@configuration注解直接配置（推荐）

示例代码如下：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
 * Springboot跨域支持.
 */
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); //允许任何域名
        corsConfiguration.addAllowedHeader("*"); //允许任何头
        corsConfiguration.addAllowedMethod("*"); //允许任何方法
        corsConfiguration.setAllowCredentials(true);
        
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); //注册跨域配置
        return new CorsFilter(source);
    }
}

方法二：使用过滤器，为http头添加跨域支持配置

示例代码如下：

@Component
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest reqs = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin",reqs.getHeader("Origin"));
        // response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
    }
    @Override
    public void init(FilterConfig filterConfig) {}
    @Override
    public void destroy() {}
}

补充

另外，如果最终部署的时候是前后台部署在同一台机器，那么跨域问题应该只会出现在开发阶段，如果不想修改后台代码，其实前端开发也可以使用chrome的某个特殊模式来“强制支持”跨域。

配置只需要针对chrome浏览器。

如果 Chrome 版本在49之前，设置方法如下：
1、在Chrome的快捷图标上点击鼠标右键（如果没快捷方式，可以找到文件路径，发送快捷方式到桌面）

2、选择“属性”
【除了右键选择属性的方式查看之外，还可以按住alt双击图标，直接打开属性面板】

3、选择快捷方式标签

4、在“目标”里面，在原chrome路径的基础上加上 –disable-web-security 【注意–之前有空格】

5、点击“应用”

6、点击“确定”关闭属性窗口

7、关闭所有已打开的chrome，重新启动（必须点击该快捷方式打开）

8、看到地址栏下面的小黄条你使用的是不受支持的命令标记 –disable-web-security，就成功了

如果是49以上的版本：
步骤和上面的一样，只是第4步的参数稍微不一样。

1 2	--disable-web-security --user-data-dir=C:\chromedata 【注意--之前有空格】

C:\chromedata 是你本地硬盘的一个目录，你自己最好新建一个，上面的目录路径换成你新建的目录就可以了。
属性配置截图如下：