在實際開發(fā)中，經常會遇到前端Vue應用與后端Spring Boot API接口存在跨域訪問的問題。本篇博客將分享解決Spring Boot前端Vue跨域問題的實戰(zhàn)經驗，幫助開發(fā)者快速解決該問題。

一、跨域問題的原因

跨域問題是由于瀏覽器的同源策略引起的。同源策略限制了從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。當協(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注解標注一個配置類，并實現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)經驗。

后端代碼示例：

@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請求來獲取數據。

四、總結

本篇博客介紹了解決Spring Boot前端Vue跨域問題的實戰(zhàn)經驗，并提供了后端和前端的配置示例。通過配置后端和前端，我們可以輕松解決跨域問題，實現正常的前后端交互。希望本文能對開發(fā)者有所幫助，歡迎大家擴散分享！

以上內容僅供參考，具體情況還需根實際項目進行調整。如有更好的解決方案，歡迎留言討論。文章來源地址http://www.zghlxwxcb.cn/news/detail-687786.html

參考資料

• Spring Boot官方文檔
• Vue官方文檔
• Axios官方文檔
• MDN Web Docs - 同源策略

到了這里，關于解決Spring Boot前后端分離開發(fā)模式中的跨域問題的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！