Spring Boot前后端分離開發(fā)模式中的跨域問題及解決方法
在實際開發(fā)中,經(jīng)常會遇到前端Vue應用與后端Spring Boot API接口存在跨域訪問的問題。本篇博客將分享解決Spring Boot前端Vue跨域問題的實戰(zhàn)經(jīng)驗,幫助開發(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
注解標注一個配置類,并實現(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ù)。
四、總結(jié)
本篇博客介紹了解決Spring Boot前端Vue跨域問題的實戰(zhàn)經(jīng)驗,并提供了后端和前端的配置示例。通過配置后端和前端,我們可以輕松解決跨域問題,實現(xiàn)正常的前后端交互。
以上內(nèi)容僅供參考,具體情況還需根實際項目進行調(diào)整。如有更好的解決方案,歡迎留言討論。
到此這篇關于Spring Boot前后端分離開發(fā)模式中的跨域問題的文章就介紹到這了,更多相關Spring Boot前后端分離跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
java 集合并發(fā)操作出現(xiàn)的異常ConcurrentModificationException
Map在遍歷時候通常 現(xiàn)獲得其鍵值的集合Set,然后用迭代器Iterator來對Map進行遍歷。2009-06-06IntelliJ?IDEA教程之clean或者install?Maven項目的操作方法
這篇文章主要介紹了IntelliJ?IDEA教程之clean或者install?Maven項目的操作方法,本文分步驟給大家介紹兩種方式講解如何調(diào)試出窗口,需要的朋友可以參考下2023-04-04java 單元測試 對h2數(shù)據(jù)庫數(shù)據(jù)清理方式
這篇文章主要介紹了java 單元測試 對h2數(shù)據(jù)庫數(shù)據(jù)清理方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-09-09Springboot2.x 使用 Log4j2 異步打印日志的實現(xiàn)
這篇文章主要介紹了Springboot2.x 使用 Log4j2 異步打印日志的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-12-12SpringMvc后臺接收json數(shù)據(jù)中文亂碼問題詳解
這篇文章主要介紹了SpringMvc后臺接收json數(shù)據(jù)中文亂碼問題詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09java:程序包org.apache.ibatis.annotations不存在報錯解決
這篇文章主要給大家介紹了關于java:程序包org.apache.ibatis.annotations不存在報錯的解決方法,這個錯誤是我在直接導入springboot項目的時候報錯的,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-04-04