快捷導(dǎo)航

springboot3解決跨域的幾種方式小結(jié)

更新時(shí)間：2024年03月04日 09:29:04 作者：蒾酒

這篇文章主要介紹了springboot3解決跨域的幾種方式,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的解決跨域有一定的幫助,需要的朋友可以參考下

1.前言

本文介紹了spring boot中三種解決跨域問題的方式，堅(jiān)持看完相信對你有幫助。

2.何為跨域

跨域問題是指在 Web 開發(fā)中，一個(gè)網(wǎng)頁的 JavaScript 代碼通過 AJAX 請求后端服務(wù)器接口時(shí)，如果請求的目標(biāo)地址與當(dāng)前頁面的地址不在同一個(gè)域（域名、端口或協(xié)議任何一項(xiàng)不同），就會(huì)產(chǎn)生跨域問題。這種情況下，根據(jù)瀏覽器的安全機(jī)制（同源策略）就會(huì)會(huì)限制頁面的跨域請求，以防止惡意網(wǎng)站對其他網(wǎng)站的訪問和操作，保護(hù)用戶信息安全。

3.跨域問題出現(xiàn)特征

1.沒有狀態(tài)碼信息

如果你看到某個(gè)請求似乎“失敗了”，但并沒有具體的HTTP狀態(tài)碼，這可能是因?yàn)闉g覽器出于安全原因阻止了對響應(yīng)的訪問。在開發(fā)者工具的網(wǎng)絡(luò)(Network)面板中，這樣的請求可能會(huì)被標(biāo)記為“cancelled”或者沒有顯示狀態(tài)碼。

2.控制臺報(bào)錯(cuò)

瀏覽器通常會(huì)在控制臺(Console)中打印一條錯(cuò)誤消息，說明因?yàn)镃ORS策略，請求被阻止了

4.方式一：使用 @CrossOrigin 注解

這是最直接簡單的方式，可以精確控制所有接口

使用方法：在你的控制器類或者控制器方法上添加 @CrossOrigin 注解，可以精確控制某個(gè)控制器類、以及下面的某個(gè)方法的允許跨域的來源、允許的請求頭、允許的請求方法等配置。

示例代碼：

@RestController
@RequestMapping("/user")
@CrossOrigin(origins = "*")//允許所有來源的請求跨域
@Tag(name = "用戶模塊")
public class UserController {
    private final UserService userService;
 
    public UserController(UserService userService) {
        this.userService = userService;
    }
 
    @PostMapping("/login")
    @Operation(summary = "用戶登錄")
    public UserLoginVO login(@RequestBody @Validated UserLoginDTO userLoginDTO) {
        return userService.login(userLoginDTO);
    }
 
}

這種方式解決跨域需要在每個(gè)控制器上加注解，屬于重復(fù)勞動(dòng)對于不需要精確控制的場景屬于重復(fù)勞動(dòng)?？梢钥聪孪旅娣绞?/p>

5.方式二：自定義 WebMvcConfigurer

通過實(shí)現(xiàn) WebMvcConfigurer 接口來自定義 WebMvc 配置，并覆蓋 addCorsMappings 方法以配置全局跨域規(guī)則。

示例代碼：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
/**
 * @author mijiupro
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 對所有路徑生效
                .allowedOrigins("*") //允許所有源地址
                // .allowedOrigins("https://mijiupro.com","https://mijiu.com ") // 允許的源地址（數(shù)組）
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允許的請求方法
                .allowedHeaders("*"); // 允許的請求頭
    }
}

這種方式實(shí)現(xiàn)了全局的配置，但是無法細(xì)膩到控制某個(gè)方法

6.方式三：使用 Filter 進(jìn)行跨域配置

創(chuàng)建一個(gè)跨域過濾器，在其中設(shè)置允許的跨域規(guī)則，并將該過濾器添加到 Spring Boot 的過濾器鏈中。

示例代碼：

import jakarta.servlet.*;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;
 
import java.io.IOException;
 
/**
 * @author mijiupro
 */
@Component
public class CorsFilter implements Filter {
 
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        // 將 ServletResponse 轉(zhuǎn)換為 HttpServletResponse
        HttpServletResponse httpResponse = (HttpServletResponse) response;
 
        // 設(shè)置允許跨域請求的源地址
        httpResponse.setHeader("Access-Control-Allow-Origin", "https://mijiupro.com");
 
        // 設(shè)置允許的請求方法
        httpResponse.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
 
        // 設(shè)置允許的請求頭
        httpResponse.setHeader("Access-Control-Allow-Headers", "*");
 
        // 繼續(xù)執(zhí)行 Filter 鏈
        chain.doFilter(request, response);
    }
}