Spring Boot實現並解決跨域問題的技巧-java教程-PHP中文網

Spring Boot實現並解決跨域問題的技巧

王林

發布： 2023-06-22 21:38:28

原創

1758 人瀏覽過

隨著前後端分離的普及，前端與後端之間的跨域問題也逐漸成為Web開發人員面臨的問題。跨域問題涉及到瀏覽器的同源策略，即在預設情況下，瀏覽器只允許頁面向同源伺服器發起請求，而不能向其他網域的伺服器發起請求。本文將介紹如何使用Spring Boot框架實作和解決跨域問題。

什麼是跨域問題？

跨網域問題是指在瀏覽器中，當網頁應用程式在A網域下運行，向B網域下的網頁應用程式傳送請求時，瀏覽器會封鎖此請求，因為這不符合瀏覽器同源策略的規定。同源策略指的是只有在相同協定、網域名稱、連接埠號碼相同的情況下，瀏覽器才允許頁面向伺服器發起請求。

Spring Boot支援的解決跨域方法

Spring Boot提供了多種解決跨域問題的方法，以下介紹幾種比較常用的方法。

2.1 使用註解@CrossOrigin

在Spring Boot中，可以使用註解@CrossOrigin來實現跨域請求。 @CrossOrigin註解可用於類別或方法級別，並且可以指定CORS的一些選項，例如允許跨網域存取的網域名稱、允許的請求方式等。以下是一個使用@CrossOrigin註解的範例程式碼：

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:8080", maxAge = 3600)
public class ApiController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello World!";
    }
}

登入後複製

以上程式碼中，使用了@CrossOrigin註解並指定了跨網域網域為http://localhost:8080，同時設定了最長快取時間為1小時。這樣，在前端Ajax請求時，就可以跨網域存取http://localhost:8080了。需要注意的是，@CrossOrigin註解應該要加在控制器類別上或方法上，而不是加到@RequestBody參數上。

2.2 設定WebMvcConfigurer

另一種解決跨網域問題的方法是透過實作WebMvcConfigurer接口，並覆蓋addCorsMappings方法，使用CorsRegistry設定允許跨網域存取的網域。以下是範例程式碼：

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:8080")
                .allowedMethods("GET", "POST")
                .maxAge(3600);
    }
}

登入後複製

以上程式碼中，CorsConfig類別實現了WebMvcConfigurer接口，並覆蓋了addCorsMappings方法，只允許http://localhost:8080網域下的GET、POST請求存取。包含"/api"的路徑都會受到CORS的限制，而其他路徑將不受任何限制。

2.3 配置Filter

使用篩選器也是解決跨域問題的方法。以下是使用過濾器的範例：

@Component
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws ServletException, IOException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST");
        response.setHeader("Access-Control-Max-Age", "3600");
        chain.doFilter(req, res);
    }
}

登入後複製

以上程式碼中，CorsFilter類別實作了Filter接口，並加入了Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control- Max-Age等請求頭訊息，允許http://localhost:8080網域下的GET、POST請求存取。