springboot+vue項目怎么解決跨域問題詳解

更新時間：2025年05月13日 08:54:55 作者：云之兕

這篇文章主要介紹了springboot+vue項目怎么解決跨域問題的相關資料,包括前端代理、后端全局配置CORS、注解配置和Nginx反向代理,并總結(jié)了每種方法的適用場景、優(yōu)點和缺點,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1. 前端代理（開發(fā)環(huán)境推薦）

適用場景：Vue 開發(fā)環(huán)境調(diào)試時，避免直接請求后端接口的跨域問題。

實現(xiàn)步驟：

在 Vue 項目的 vue.config.js 中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {  // 代理所有以 /api 開頭的請求
        target: 'http://localhost:8080', // Spring Boot 后端地址
        changeOrigin: true, // 允許跨域
        pathRewrite: {
          '^/api': '' // 去除請求路徑中的 /api 前綴
        }
      }
    }
  }
}

2.前端請求時使用 /api 前綴：

axios.get('/api/users').then(response => {
  // 處理響應
});

優(yōu)點：無需修改后端代碼，適合開發(fā)階段快速解決跨域。

2. 后端全局配置 CORS（生產(chǎn)環(huán)境推薦）

適用場景：生產(chǎn)環(huán)境需要后端直接支持跨域。
實現(xiàn)步驟：

在 Spring Boot 中創(chuàng)建全局 CORS 配置類：

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有接口
                .allowedOrigins("http://localhost:5173") // 允許的前端地址
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允許的請求方法
                .allowedHeaders("*") // 允許的請求頭
                .allowCredentials(true) // 允許發(fā)送 Cookie
                .maxAge(3600); // 預檢請求緩存時間（秒）
    }
}

2.若使用 Spring Security，需額外放行 OPTIONS 請求（預檢請求）：

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http.cors() // 啟用 CORS
            .and()
            // 其他安全配置...
            .authorizeRequests()
            .requestMatchers(HttpMethod.OPTIONS).permitAll() // 放行 OPTIONS 請求
            .anyRequest().authenticated();
        return http.build();
    }
}

3. 后端注解配置（按接口控制）

適用場景：僅特定接口需要跨域支持。

實現(xiàn)步驟：在 Controller 或方法上添加 @CrossOrigin 注解：

@RestController
@CrossOrigin(origins = "http://localhost:5173") // 類級別注解
public class UserController {

    @GetMapping("/users")
    @CrossOrigin(origins = "http://localhost:5173") // 方法級別注解
    public List<User> getUsers() {
        // 業(yè)務邏輯
    }
}

4. Nginx 反向代理（生產(chǎn)環(huán)境終極方案）

適用場景：前后端部署到同一域名下，徹底避免跨域。

實現(xiàn)步驟：

配置 Nginx，將前端請求代理到后端接口：

server {
    listen 80;
    server_name your-domain.com;

    # 前端靜態(tài)資源
    location / {
        root /path/to/vue/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 后端 API 代理
    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

2.重啟 Nginx：

sudo nginx -s reload

總結(jié)

方案	適用場景	優(yōu)點	缺點
前端代理	開發(fā)環(huán)境	無需后端改動，快速解決跨域	僅適用于開發(fā)環(huán)境
后端全局 CORS	生產(chǎn)環(huán)境	統(tǒng)一管理，安全性可控	需后端配置
注解配置	特定接口跨域	靈活控制單個接口	配置冗余，維護成本高
Nginx 反向代理	生產(chǎn)環(huán)境部署	徹底解決跨域，提升性能	需運維支持