Spring Boot 配置跨域访问CORS 实现API接口正常访问

本身项目采用springboot框架，在做swagger接口调用的时候请求正常，但是前端js反馈接口请求出现CORS请求错误。如下图所示：

解决办法：

1.java后台新增跨域请求

package exsun.bigdata.hbasestorage.config;

import org.springframework.util.StringUtils;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.annotation.WebInitParam;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;

@WebFilter(filterName = "corsFilter", urlPatterns = "/*",
            initParams = {@WebInitParam(name = "allowOrigin", value = "*"),
                        @WebInitParam(name = "allowMethods", value = "GET,POST,PUT,DELETE,OPTIONS"),
                        @WebInitParam(name = "allowCredentials", value = "true"),
                        @WebInitParam(name = "allowHeaders", value = "Content-Type,X-Token")})
public class CorsFilter implements Filter {

    private String allowOrigin;
    private String allowMethods;
    private String allowCredentials;
    private String allowHeaders;
    private String exposeHeaders;

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        allowOrigin = filterConfig.getInitParameter("allowOrigin");
        allowMethods = filterConfig.getInitParameter("allowMethods");
        allowCredentials = filterConfig.getInitParameter("allowCredentials");
        allowHeaders = filterConfig.getInitParameter("allowHeaders");
        exposeHeaders = filterConfig.getInitParameter("exposeHeaders");
        System.out.println("*********************************过滤器初始化**************************");
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        if (!StringUtils.isEmpty(allowOrigin)) {
            if(allowOrigin.equals("*")){
                response.setHeader("Access-Control-Allow-Origin", allowOrigin);
            }else{
                List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));
                if (allowOriginList != null && allowOriginList.size() > 0) {
                    String currentOrigin = request.getHeader("Origin");
                    if (allowOriginList.contains(currentOrigin)) {
                        response.setHeader("Access-Control-Allow-Origin", currentOrigin);
                    }
                }
            }
        }
        if (!StringUtils.isEmpty(allowMethods)) {
            response.setHeader("Access-Control-Allow-Methods", allowMethods);
        }
        if (!StringUtils.isEmpty(allowCredentials)) {
            response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
        }
        if (!StringUtils.isEmpty(allowHeaders)) {
            response.setHeader("Access-Control-Allow-Headers", allowHeaders);
        }
        if (!StringUtils.isEmpty(exposeHeaders)) {
            response.setHeader("Access-Control-Expose-Headers", exposeHeaders);
        }
        System.out.println("*********************************过滤器被使用**************************");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {
        System.out.println("*********************************过滤器被销毁**************************");
    }
}

2. 将下面申明放到启动配置里面，参加初始化

@Bean()
    public CorsFilter AuthFilter() {
        return new CorsFilter();
    }

我这边放到Swagger初始化中了

package exsun.bigdata.hbasestorage.config;


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

@Configuration
@EnableSwagger2
public class Swagger2Config {
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .ignoredParameterTypes(HttpServletRequest.class, HttpServletResponse.class,
                        HttpSession.class)
                .select()
//                .apis(RequestHandlerSelectors.withMethodAnnotation(ApiOperation.class))
                .apis(RequestHandlerSelectors.basePackage("exsun.bigdata.hbasestorage"))
                .paths(PathSelectors.any())
                .build();
    }
    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("springboot利用swagger构建api文档")
                .description("gps、报警数据接口")
                .termsOfServiceUrl("http://127.0.0.1")
                .version("1.0")
                .build();
    }

    @Bean()
    public CorsFilter AuthFilter() {
        return new CorsFilter();
    }
}

3.增加接口申明 @CrossOrigin  一定需要增加不然无法生效

@RestController
public class TestController {
    @CrossOrigin
    @RequestMapping("/hello")
    public String index() {
        return "Hello World";
    }
}

 

4.前端html调试，用google进行打开。如果正常显示“”跨域访问成功，资源内容为Hello World”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Page Index</title>
</head>

<body>
    <h2>前台界面</h2>
    <p id="info"></p>
</body>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $.ajax({
        url: 'http://localhost:8082/hello',
        type: "POST",
        xhrFields: {
            // 允许跨域认证
            withCredentials: true
        },
        success: function (data) {
            $("#info").html("跨域访问成功，资源内容为" + data);
        },
        error: function (data) {
            $("#info").html("跨域访问失败!!");
        }
    })
</script>
</html>