web后端怎么解決跨域問題

本文小編為大家詳細介紹“web后端怎么解決跨域問題”，內容詳細，步驟清晰，細節處理妥當，希望這篇“web后端怎么解決跨域問題”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

什么是跨域請求

首先，我們要了解什么是跨域請求。簡單來說，當一臺服務器資源從另一臺服務器（不同 的域名或者端口）請求一個資源或者接口，就會發起一個跨域 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/*就可以了。

讀到這里，這篇“web后端怎么解決跨域問題”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。