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

一、跨域問(wèn)題的原因

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

二、解決方案

1. 后端配置

在Spring Boot后端項(xiàng)目中，我們可以通過(guò)添加跨域配置允許前端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è)配置類(lèi)，并實(shí)現(xiàn) WebMvcConfigurer 接口。在 addCorsMappings 方法中，配置了允許所有來(lái)源（ allowedOrigins("*") ）、所有HTTP方法（ allowedMethods("*") ）、所有請(qǐng)求頭（ allowedHeaders("*") ）、支持跨域攜帶Cookie（ allowCredentials(true) ）以及緩存時(shí)間（ maxAge(3600) ）。

2. 前端配置

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

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

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

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

在實(shí)際開(kāi)發(fā)中，我們可以通過(guò)以下示例來(lái)演示解決Spring Boot端Vue跨域問(wèn)題的實(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 ，前端通過(guò) axios 發(fā)送GET請(qǐng)求來(lái)獲取數(shù)據(jù)。

四、總結(jié)

本篇博客介紹了解決Spring Boot前端Vue跨域問(wèn)題的實(shí)戰(zhàn)經(jīng)驗(yàn)，并提供了后端和前端的配置示例。通過(guò)配置后端和前端，我們可以輕松解決跨域問(wèn)題，實(shí)現(xiàn)正常的前后端交互。

以上內(nèi)容僅供參考，具體情況還需根實(shí)際項(xiàng)目進(jìn)行調(diào)整。如有更好的解決方案，歡迎留言討論。

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

到此這篇關(guān)于Spring Boot前后端分離開(kāi)發(fā)模式中的跨域問(wèn)題的文章就介紹到這了,更多相關(guān)Spring Boot前后端分離跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論