快捷導(dǎo)航

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

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

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

1.前言

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

2.何為跨域

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

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

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

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

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

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

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

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

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

示例代碼：

@RestController
@RequestMapping("/user")
@CrossOrigin(origins = "*")//允許所有來(lái)源的請(qǐng)求跨域
@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)對(duì)于不需要精確控制的場(chǎng)景屬于重復(fù)勞動(dòng)。可以看下下面方式

5.方式二：自定義 WebMvcConfigurer

通過(guò)實(shí)現(xiàn) WebMvcConfigurer 接口來(lái)自定義 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("/**") // 對(duì)所有路徑生效
                .allowedOrigins("*") //允許所有源地址
                // .allowedOrigins("https://mijiupro.com","https://mijiu.com ") // 允許的源地址（數(shù)組）
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允許的請(qǐng)求方法
                .allowedHeaders("*"); // 允許的請(qǐng)求頭
    }
}

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

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

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

示例代碼：

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è)置允許跨域請(qǐng)求的源地址
        httpResponse.setHeader("Access-Control-Allow-Origin", "https://mijiupro.com");
 
        // 設(shè)置允許的請(qǐng)求方法
        httpResponse.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
 
        // 設(shè)置允許的請(qǐng)求頭
        httpResponse.setHeader("Access-Control-Allow-Headers", "*");
 
        // 繼續(xù)執(zhí)行 Filter 鏈
        chain.doFilter(request, response);
    }
}