快捷導(dǎo)航

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

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

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

一、跨域問題的原因

跨域問題是由于瀏覽器的同源策略引起的。同源策略限制了從一個(gè)源加載的文檔或腳本如何與來自另一個(gè)源的資源進(jìn)行交互。當(dāng)協(xié)議、主機(jī)名或端口號(hào)不同時(shí)，瀏覽器就會(huì)認(rèn)為這是跨域訪問，從而拒絕請(qǐng)求。

二、解決方案

1. 后端配置

在Spring Boot后端項(xiàng)目中，我們可以通過添加跨域配置允許前端Vue應(yīng)用的跨域請(qǐng)求。

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

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

2. 前端配置

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

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

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

三、實(shí)戰(zhàn)示例

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

后端代碼示例：

@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);
    });

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