跨域配置與兩種解決方法

• 2020 年 12 月 23 日
• 筆記
• Nginx

跨域問題出於瀏覽器的同源策略限制。同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。同源策略會阻止一個域的javascript腳本和另外一個域的內容進行交互。所謂同源（即指在同一個域）就是兩個頁面具有相同的協議（protocol），主機（host）和端口號（port）。

CORS 是跨域資源分享（Cross-Origin Resource Sharing）的縮寫。它是 W3C 標準，屬於跨源 AJAX 請求的根本解決方法。

1 兩種跨域解決方法

當web項目僅部署在Tomcat等服務器時，我們可以添加Java跨域配置；假設項目採用了Nginx，跨域任務可以交給Nginx。

1.1 Nginx跨域配置

完整的Nginx跨域配置示例

server {
    listen 3002;
    server_name localhost;

    location /hello {
    
        # 指定允許跨域的方法，*代表所有，也可設置具體方法。
        add_header Access-Control-Allow-Methods $http_access_control_request_method;
    
        # 預檢命令的緩存，如果不緩存每次會發送兩次請求
        add_header Access-Control-Max-Age 3600;
    
        # 帶cookie請求需要加上這個字段，並設置為true
        add_header Access-Control-Allow-Credentials true;
    
        # 表示允許這個域跨域調用（客戶端發送請求的域名和端口） 
        # $http_origin動態獲取請求客戶端請求的域 不用*的原因是帶cookie的請求不支持*號
        add_header Access-Control-Allow-Origin $http_origin;
    
        # 表示請求頭的字段 動態獲取
        add_header Access-Control-Allow-Headers $http_access_control_request_headers;
    
        # OPTIONS預檢命令，預檢命令通過時才發送請求
        # 檢查請求的類型是不是預檢命令
        if ($request_method = OPTIONS){
            return 200;
        }
    }
}

1.2 SpringBoot 跨域配置註冊

原理與nignx相同，修改請求信息。 本類作為一個bean裝載到spring容器中。

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        // Cors配置
        CorsConfiguration config = new CorsConfiguration();
        // 1. 設置請求域名
        config.addAllowedOrigin("//localhost:8080"); // 本地ip
        config.addAllowedOrigin("//192.168.233.130:8080"); // 虛擬機
        config.addAllowedOrigin("//49.232.170.99"); // 外網ip
        config.addAllowedOrigin("*"); // 任意

        // 2. 設置允許的header
        config.addAllowedHeader("*");

        // 3. 設置允許請求的方法
        config.addAllowedMethod("*");

        // 4. 設置是否發送cookie
        config.setAllowCredentials(true);

        // 為URL添加路由
        UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
        corsSource.registerCorsConfiguration("/**", config);

        return new CorsFilter(corsSource);
    }
}