Java 跨域问题的处理方式

Failed to load https://www.baidu.com/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

/**
 * 使用自定义的 Filter 拦截器实现跨域请求、
 * 适用于所有的 Java Web 项目并且不局限于某个框架
 * 注：此处的 @Component 仅为让 Spring 知道这个 Bean, 不然拦截器不会加载
 *
 * @author rxliuli
 */
public class CustomCorsFilterConfig implements Filter {
  @Override
  public void init(FilterConfig filterConfig) {
  }

  @Override
  public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    //允许所有来源
    String allowOrigin = "*";
    //允许以下请求方法
    String allowMethods = "GET,POST,PUT,DELETE,OPTIONS";
    //允许以下请求头
    String allowHeaders = "Content-Type,X-Token,Authorization";
    //允许有认证信息（cookie）
    String allowCredentials = "true";

    String origin = request.getHeader("Origin");
    //此处是为了兼容需要认证信息(cookie)的时候不能设置为 * 的问题
    response.setHeader("Access-Control-Allow-Origin", origin == null ? allowOrigin : origin);
    response.setHeader("Access-Control-Allow-Methods", allowMethods);
    response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
    response.setHeader("Access-Control-Allow-Headers", allowHeaders);

    //处理 OPTIONS 的请求
    if ("OPTIONS".equals(request.getMethod())) {
      response.setStatus(HttpServletResponse.SC_OK);
      return;
    }
    filterChain.doFilter(request, response);
  }

  @Override
  public void destroy() {
  }
}

<!--cors 跨域访问-->
<filter>
 <filter-name>customCorsFilterConfig</filter-name>
 <filter-class>CustomCorsFilterConfig</filter-class>
</filter>
<filter-mapping>
 <filter-name>customCorsFilterConfig</filter-name>
 <url-pattern>/*</url-pattern>
</filter-mapping>

@Configuration
public class CorsConfig {
  @Bean
  public OncePerRequestFilter corsFilter() {
    return new OncePerRequestFilter() {
      @Override
      protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        //允许所有来源
        String allowOrigin = "*";
        //允许以下请求方法
        String allowMethods = "GET,POST,PUT,DELETE,OPTIONS";
        //允许以下请求头
        String allowHeaders = "Content-Type,X-Token,Authorization";
        //允许有认证信息（cookie）
        String allowCredentials = "true";

        String origin = request.getHeader("Origin");
        //此处是为了兼容需要认证信息(cookie)的时候不能设置为 * 的问题
        response.setHeader("Access-Control-Allow-Origin", origin == null ? allowOrigin : origin);
        response.setHeader("Access-Control-Allow-Methods", allowMethods);
        response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
        response.setHeader("Access-Control-Allow-Headers", allowHeaders);

        //处理 OPTIONS 的请求
        if ("OPTIONS".equals(request.getMethod())) {
          response.setStatus(HttpServletResponse.SC_OK);
          return;
        }
        filterChain.doFilter(request, response);
      }
    };
  }
}

fetch(url)
 .then(res => res.json())
 .then(json => console.log(json))

var fd = new FormData()
fd.append('username', 'rx')
fd.append('password', 'rx')

fetch(url, {
 method: 'POST',
 body: fd,
})
 .then(res => res.json())
 .then(json => console.log(json))

fetch(url, {
 /**
  * 关键就在这里，代表用户是否应该在跨域的情况下发送 cookies 和 HTTP Basic authentication 等验信息以及服务端能否返回 Set-Cookie（服务端 Session 需要使用这个向 cookie 中设置 sessionId）。
  * 包含三个可选值：omit(从不发送), same-origin(同源才发送), include(总会发送)
  * 参考链接：<https://developer.mozilla.org/zh-CN/docs/Web/API/Request/credentials>
  */
 credentials: 'include',
})
 .then(res => res.json())
 .then(json => console.log(json))