關於後端如何解決跨域的問題說明

Posted on 2022-08-30 by WalkonNet

什麼是跨域請求

首先，我們要瞭解什麼是跨域請求。簡單來說，當一臺服務器資源從另一臺服務器（不同的域名或者端口）請求一個資源或者接口，就會發起一個跨域 HTTP 請求。

舉個簡單的例子：

從http://aaa.com/index.html,發送一個 Ajax 請求，請求地址是 http://bbb.com/下面的一個接口，這就是發起瞭一個跨域請求。在不做任何處理的情況下，這個跨域請求是無法被成功請求的，因為瀏覽器基於同源策略會對跨域請求做一定的限制。那什麼又是同源策略呢？

什麼是同源策略

首先大傢要知道同源策略發生的場景——瀏覽器中，什麼意思呢？如果不是瀏覽器的話，就不會受到同源策略的影響。也就是說，兩個服務器直接進行跨域請求是可以進行數據請求的。這也就為我們接下來的後端跨域埋下一下小伏筆。同源策略的目的是什麼呢？同源策略限制瞭從同一個源加載的文檔或者腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。

同源策略限制內容有

Cookie、LocalStorage、IndexedDB 等存儲性內容
DOM 節點
AJAX 請求不能發送

那什麼又是同源？

大傢都知道,一個域名請求地址的組成是:協議+域名+端口號+請求資源地址 , 當協議、域名、端口號中任意一個不相同時 , 都算作不同源（必須是域名完全相同，比如說 a.example.com 和 b.example.com 這兩個域名。

雖然它們的頂級域名和二級域名（均為 example.com）都相同，但是三級域名（a 和 b）不相同，所以也不能算作域名相同）。

如果不同時滿足這上面三個條件，那就不符合瀏覽器的同源策略。需要註意的是，不是所有的交互都會被同源策略攔截下來，下面兩種交互就不會觸發同源策略：

跨域寫操作（Cross-origin writes）

例如超鏈接、重定向以及表單的提交操作，特定少數的 HTTP 請求需要添加預檢請求（preflight）

跨域資源嵌入（Cross-origin embedding）

<script> 標簽嵌入的跨域腳本； o <link> 標簽嵌入的 CSS 文件； o <img> 標簽嵌入圖片；
<video> 和 <audio> 標簽嵌入多媒體資源； o <object>, <embed>, <applet> 的插件；
@font-face 引入的字體，一些瀏覽器允許跨域字體（cross-origin fonts），一些需要同源字體（same-origin fonts）；
<frame> 和 <iframe> 載入的任何資源，站點可以使用 X-FrameOptions 消息頭來組織這種形式的跨域交互。

這裡你或許有個疑問：請求跨域瞭，那麼請求到底發出去沒有？

跨域並不是請求發不出去，請求能發出去，服務端能收到請求並正常返回結果，隻是結果被瀏覽器攔截瞭。

你可能會疑問明明通過表單的方式可以發起跨域請求，為什麼 Ajax 就不會?因為歸根結底，跨域是為瞭阻止用戶讀取到另一個域名下的內容，Ajax 可以獲取響應，瀏覽器認為這不安全，所以攔截瞭響應。但是表單並不會獲取新的內容，所以可以發起跨域請求。

同時也說明瞭跨域並不能完全阻止 CSRF，因為請求畢竟是發出去瞭。

跨域解決方案

跨域就是通過某些手段來繞過同源策略限制，實現不同服務器之間通信的效果。方法有很多，大致分為兩類：

服務端進行設置默認允許某些域名跨域訪問
從客戶端入手想辦法繞開同源安全策略

常見的解決方案有：

1.jsonp

利用 <script> 標簽沒有跨域限制的漏洞，網頁可以得到從其他來源動態產生的 JSON 數據。JSONP請求一定需要對方的服務器做支持才可以。

JSONP和AJAX相同，都是客戶端向服務器端發送請求，從服務器端獲取數據的方式。但AJAX屬於同源策略，JSONP屬於非同源策略（跨域請求）

JSONP優點是簡單兼容性好，可用於解決主流瀏覽器的跨域數據訪問的問題。缺點是僅支持get方法具有局限性,不安全可能會遭受XSS攻擊。

2.cors

CORS（Cross-origin resource sharing），跨域資源共享。CORS 其實是瀏覽器制定的一個規范，瀏覽器會自動進行 CORS 通信，它的實現則主要在服務端，它通過一些 HTTP Header 來限制可以訪問的域，例如頁面 A 需要訪問 B 服務器上的數據，如果 B 服務器上聲明瞭允許 A 的域名訪問，那麼從 A 到 B 的跨域請求就可以完成。對於那些會對服務器數據產生副作用的 HTTP 請求，瀏覽器會使用 OPTIONS 方法發起一個預檢請求（preflight request），從而可以獲知服務器端是否允許該跨域請求，服務器端確認允許後，才會發起實際的請求。在預檢請求的返回中，服務器端也可以告知客戶端是否需要身份認證信息。我們隻需要設置響應頭，即可進行跨域請求。

雖然設置 CORS 和前端沒什麼關系，但是通過這種方式解決跨域問題的話，會在發送請求時出現兩種情況，分別為簡單請求和復雜請求。

簡單請求：

隻要同時滿足以下兩大條件，就屬於簡單請求：

1）使用GET、HEAD、POST方法之一；

2）Content-Type 的值僅限於：text/plain、multipart/form-data、application/x-www-form-urlencoded，請求中的任意 XMLHttpRequestUpload 對象均沒有註冊任何事件監聽器； XMLHttpRequestUpload 對象可以使用 XMLHttpRequest.upload 屬性訪問；

復雜請求：

不符合以上條件的請求就肯定是復雜請求瞭。復雜請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求,該請求是 option 方法的，通過該請求來知道服務端是否允許跨域請求。

我們用PUT向後臺請求時，屬於復雜請求，後臺需被請求的Servlet中添加Header設置，Access-Control-Allow-Origin這個Header在W3C標準裡用來檢查該跨域請求是否可以被通過，如果值為*則表明當前頁面可以跨域訪問。默認的情況下是不允許的。

一般我們可以寫一個過濾器：

@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");
    }
 
    @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)) {
            // 允許攜帶cookie
            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);
        }
        filterChain.doFilter(servletRequest, servletResponse);
    }
 
    @Override
    public void destroy() {
 
    }
}

大功告成，現在前端就可以跨域獲取後臺的數據瞭，正如我們上面所說的，後端是實現 CORS 通信的關鍵。

如果你的SpringBoot版本在2.0以上，以下代碼配置即可完美解決你的前後端跨域請求問題：

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /*是否允許請求帶有驗證信息*/
        corsConfiguration.setAllowCredentials(true);
        /*允許訪問的客戶端域名*/
        corsConfiguration.addAllowedOrigin("*");
        /*允許服務端訪問的客戶端請求頭*/
        corsConfiguration.addAllowedHeader("*");
        /*允許訪問的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

或者使用WebMvcConfigurationSupport，實現方式有很多，感興趣的可以自行研究。

3.@CrossOrigin註解

這個方法僅對Java有用。springboot中，在Controller類上添加一個 @CrossOrigin(origins ="*") 註解就可以實現對當前controller 的跨域訪問瞭，當然這個標簽也可以加到方法上，或者直接加到入口類上對所有接口進行跨域處理，註意這個註解隻在JDK1.8版本以上才起作用。

4.使用SpringCloud網關

服務網關(zuul)又稱路由中心，用來統一訪問所有api接口，維護服務。

Spring Cloud Zuul通過與Spring Cloud Eureka的整合，實現瞭對服務實例的自動化維護，所以在使用服務路由配置的時候，我們不需要向傳統路由配置方式那樣去指定具體的服務實例地址，隻需要通過Ant模式配置文件參數即可

5.Node中間件代理(兩次跨域)

實現原理：同源策略是瀏覽器需要遵循的標準，而如果是服務器向服務器請求就無需遵循同源策略。這樣的話，我們可以讓服務器替我們發送一個請求，請求其他服務器下面的數據。然後我們的頁面訪問當前服務器下的接口就沒有跨域問題瞭。

代理服務器，需要做以下幾個步驟：

接受客戶端請求。
將請求轉發給服務器。
拿到服務器響應數據。
將響應轉發給客戶端。

6.nginx反向代理

實現原理類似於Node中間件代理，需要你搭建一個中轉nginx服務器，用於轉發請求。

使用nginx反向代理實現跨域，是最簡單的跨域方式。隻需要修改nginx的配置即可解決跨域問題，支持所有瀏覽器，支持session，不需要修改任何代碼，並且不會影響服務器性能。

實現思路：通過nginx配置一個代理服務器做跳板機，反向代理訪問domain2接口，並且可以順便修改cookie中domain信息，方便當前域cookie寫入，實現跨域登錄。

將nginx目錄下的nginx.conf修改如下:

// proxy服務器
server {
    listen       81;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie裡域名
        index  index.html index.htm;
 
        # 當用webpack-dev-server等中間件代理接口訪問nignx時，此時無瀏覽器參與，故沒有同源限制，下面的跨域配置可不啟用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #當前端隻跨域不帶cookie時，可為*
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
        add_header Access-Control-Allow-Headers *;
    }
}

這樣我們的前端代理隻要訪問 http:www.domain1.com:81/*就可以瞭。

總結

CORS支持所有類型的HTTP請求，是跨域HTTP請求的根本解決方案
JSONP隻支持GET請求，JSONP的優勢在於支持老式瀏覽器，以及可以向不支持CORS的網站請求數據。
不管是Node中間件代理還是nginx反向代理，主要是通過同源策略對服務器不加限制。
日常工作中，用得比較多的跨域方案是cors和nginx反向代理

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

關於後端如何解決跨域的問題說明

目錄

什麼是跨域請求

什麼是同源策略

同源策略限制內容有

那什麼又是同源？

跨域解決方案

1.jsonp

2.cors

3.@CrossOrigin註解

4.使用SpringCloud網關

5.Node中間件代理(兩次跨域)

6.nginx反向代理

總結

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

什麼是跨域請求

什麼是同源策略

同源策略限制內容有

那什麼又是同源？

跨域解決方案

1.jsonp

2.cors

3.@CrossOrigin註解

4.使用SpringCloud網關

5.Node中間件代理(兩次跨域)

6.nginx反向代理

總結

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆