Spring Boot前后端分離開發(fā)模式中的跨域問題及解決方法

更新時間：2023年09月01日 15:24:44 作者：java李楊勇

本文介紹了解決Spring Boot前端Vue跨域問題的實戰(zhàn)經(jīng)驗,并提供了后端和前端的配置示例,通過配置后端和前端,我們可以輕松解決跨域問題,實現(xiàn)正常的前后端交互,需要的朋友可以參考下

一、跨域問題的原因

跨域問題是由于瀏覽器的同源策略引起的。同源策略限制了從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。當協(xié)議、主機名或端口號不同時，瀏覽器就會認為這是跨域訪問，從而拒絕請求。

二、解決方案

1. 后端配置

在Spring Boot后端項目中，我們可以通過添加跨域配置允許前端Vue應用的跨域請求。

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

以上代碼中使用 @Configuration 注解標注一個配置類，并實現(xiàn) WebMvcConfigurer 接口。在 addCorsMappings 方法中，配置了允許所有來源（ allowedOrigins("*") ）、所有HTTP方法（ allowedMethods("*") ）、所有請求頭（ allowedHeaders("*") ）、支持跨域攜帶Cookie（ allowCredentials(true) ）以及緩存時間（ maxAge(3600) ）。

2. 前端配置

在Vue前端項目中，我們可以通過配置 vue.config.js 文件來解決跨域問題。

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target 'http://localhost:8080',  // 后端API接口地址
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

以上代碼中，我們通過 devServer 配置項的 proxy 屬性來配置代理。將請求路徑中以 api 開頭的請求代理到指定的后端API接口地址（這里是 http://localhost:8080 ）。 changeOrigin 設置為 true 表示開啟跨域。

三、實戰(zhàn)示例

在實際開發(fā)中，我們可以通過以下示例來演示解決Spring Boot端Vue跨域問題的實戰(zhàn)經(jīng)驗。

后端代碼示例：

@RestController
@RequestMapping("/api")
public class HelloController {
    @GetMapping("/hello")
    public String hello() {
        return "Hello, World!";
    }
}

```javascript
axios.get('/api/hello')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error(error);
    });

以上示例中，后端提供了一個簡單的接口 /api/hello ，前端通過 axios 發(fā)送GET請求來獲取數(shù)據(jù)。