快捷導(dǎo)航

Java 跨域問(wèn)題的處理方式

更新時(shí)間：2020年11月19日 09:58:49 作者：rxliuli

這篇文章主要介紹了Java 跨域問(wèn)題的處理方式，幫助大家更好的理解和使用Java，感興趣的朋友可以了解下

問(wèn)題

在頁(yè)面上要使用 Ajax 請(qǐng)求去獲取另外一個(gè)服務(wù)的數(shù)據(jù)，由于瀏覽器的同源策略，所以直接請(qǐng)求會(huì)得到一個(gè) Error。

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.

大概就是這樣的一個(gè)錯(cuò)誤，關(guān)鍵詞是 Access-Control-Allow-Origin，一般出現(xiàn)這個(gè)都是跨域問(wèn)題。

解決方案

解決跨域問(wèn)題的方式有很多，但這里之說(shuō) Cors 的方案。

在后臺(tái)添加一個(gè) Filter 過(guò)濾器

/**
 * 使用自定義的 Filter 攔截器實(shí)現(xiàn)跨域請(qǐng)求、
 * 適用于所有的 Java Web 項(xiàng)目并且不局限于某個(gè)框架
 * 注：此處的 @Component 僅為讓 Spring 知道這個(gè) Bean, 不然攔截器不會(huì)加載
 *
 * @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 {
    //允許所有來(lái)源
    String allowOrigin = "*";
    //允許以下請(qǐng)求方法
    String allowMethods = "GET,POST,PUT,DELETE,OPTIONS";
    //允許以下請(qǐng)求頭
    String allowHeaders = "Content-Type,X-Token,Authorization";
    //允許有認(rèn)證信息（cookie）
    String allowCredentials = "true";

    String origin = request.getHeader("Origin");
    //此處是為了兼容需要認(rèn)證信息(cookie)的時(shí)候不能設(shè)置為 * 的問(wèn)題
    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 的請(qǐng)求
    if ("OPTIONS".equals(request.getMethod())) {
      response.setStatus(HttpServletResponse.SC_OK);
      return;
    }
    filterChain.doFilter(request, response);
  }

  @Override
  public void destroy() {
  }
}

在 web.xml 文件中添加攔截器配置（注：如果可能就配置成第一個(gè) Filter）

<!--cors 跨域訪(fǎng)問(wèn)-->
<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>

Spring Web 的解決方案

配置一個(gè)每次請(qǐng)求都過(guò)濾一次的 Filter 就好了

@Configuration
public class CorsConfig {
  @Bean
  public OncePerRequestFilter corsFilter() {
    return new OncePerRequestFilter() {
      @Override
      protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        //允許所有來(lái)源
        String allowOrigin = "*";
        //允許以下請(qǐng)求方法
        String allowMethods = "GET,POST,PUT,DELETE,OPTIONS";
        //允許以下請(qǐng)求頭
        String allowHeaders = "Content-Type,X-Token,Authorization";
        //允許有認(rèn)證信息（cookie）
        String allowCredentials = "true";

        String origin = request.getHeader("Origin");
        //此處是為了兼容需要認(rèn)證信息(cookie)的時(shí)候不能設(shè)置為 * 的問(wèn)題
        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 的請(qǐng)求
        if ("OPTIONS".equals(request.getMethod())) {
          response.setStatus(HttpServletResponse.SC_OK);
          return;
        }
        filterChain.doFilter(request, response);
      }
    };
  }
}

使用示例

下面是一些簡(jiǎn)單的使用 fetch 進(jìn)行跨域請(qǐng)求的示例：

簡(jiǎn)單 fetch 請(qǐng)求，和正常使用 fetch 并無(wú)區(qū)別

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

表單請(qǐng)求

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))

需要認(rèn)證的請(qǐng)求

fetch(url, {
 /**
  * 關(guān)鍵就在這里，代表用戶(hù)是否應(yīng)該在跨域的情況下發(fā)送 cookies 和 HTTP Basic authentication 等驗(yàn)信息以及服務(wù)端能否返回 Set-Cookie（服務(wù)端 Session 需要使用這個(gè)向 cookie 中設(shè)置 sessionId）。
  * 包含三個(gè)可選值：omit(從不發(fā)送), same-origin(同源才發(fā)送), include(總會(huì)發(fā)送)
  * 參考鏈接：<https://developer.mozilla.org/zh-CN/docs/Web/API/Request/credentials>
  */
 credentials: 'include',
})
 .then(res => res.json())
 .then(json => console.log(json))