Vue+SpringBoot前后端分離中的跨域問題
在前后端分離開發(fā)中,需要前端調(diào)用后端api并進(jìn)行內(nèi)容顯示,如果前后端開發(fā)都在一臺(tái)主機(jī)上,則會(huì)由于瀏覽器的同源策略限制,出現(xiàn)跨域問題(協(xié)議、域名、端口號(hào)不同等),導(dǎo)致不能正常調(diào)用api接口,給開發(fā)帶來(lái)不便。
封裝api請(qǐng)求
import axios from 'axios' //axios.create創(chuàng)建一個(gè)axios實(shí)例,并對(duì)該實(shí)例編寫配置,后續(xù)所有通過(guò)實(shí)例發(fā)送的請(qǐng)求都受當(dāng)前配置約束 const $http = axios.create({ baseURL: '', timeout: 1000, //headers: {'X-Custom-Header': 'foobar'} }); // 添加請(qǐng)求攔截器 $http.interceptors.request.use(function (config) { // 在發(fā)送請(qǐng)求之前做些什么 return config; }, function (error) { // 對(duì)請(qǐng)求錯(cuò)誤做些什么 return Promise.reject(error); }); // 添加響應(yīng)攔截器 $http.interceptors.response.use(function (response) { // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么 return response.data; //返回響應(yīng)數(shù)據(jù)的data部分 }, function (error) { // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么 return Promise.reject(error); }); export default $http
api調(diào)用函數(shù)
export const getCourses = () => { return $http.get('http://localhost:8080/teacher/courses') }
在本例中,前端使用8081端口號(hào),后端使用8080端口號(hào),前端通過(guò)調(diào)用api請(qǐng)求數(shù)據(jù)失敗
postman測(cè)試此api接口正常
如何解決同源問題?
1、在vue根目錄下新建vue.config.js文件并進(jìn)行配置
vue.config.js文件
module.exports = { devServer: { host: 'localhost', //主機(jī)號(hào) port: 8081, //端口號(hào) open: true, //自動(dòng)打開瀏覽器 proxy: { '/api': { target: 'http://localhost:8080/', //接口域名 changeOrigin: true, //是否跨域 ws: true, //是否代理 websockets secure: true, //是否https接口 pathRewrite: { //路徑重置 '^/api': '/' } } } } };
2、修改api請(qǐng)求
api調(diào)用函數(shù)
export const getCourses = () => { return $http.get('/api/teacher/courses') }
在這里,因?yàn)関ue.config.js配置了接口域名,所以此處url只需要寫余下來(lái)的部分
url完全體
http://localhost:8080/teacher/courses
但是這里因?yàn)檫\(yùn)用到代理,所以在余下的部分(即'/teacher/courses')前加上'/api',組成'/api/teacher/courses'
此時(shí)跨域問題解決,前端可以從后端接口拿到數(shù)據(jù)并顯示
問題解決!
到此這篇關(guān)于Vue+SpringBoot前后端分離中的跨域問題的文章就介紹到這了,更多相關(guān)vue SpringBoot前后端分離跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
從Element日期組件源碼中學(xué)到的兩個(gè)工具方法技巧
這篇文章主要介紹了從Element日期組件源碼中學(xué)到的兩個(gè)工具方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08vue.config.js中配置configureWebpack和chainWebpack以及一些常用的配置
configureWebpack和chainWebpack都是Vue CLI中用于修改Webpack配置的工具,configureWebpack可以通過(guò)對(duì)象或函數(shù)修改配置,簡(jiǎn)單直接;chainWebpack則使用WebpackChainAPI,適合復(fù)雜配置,兩者可以結(jié)合使用,以達(dá)到更精細(xì)的配置需求,幫助開發(fā)者優(yōu)化項(xiàng)目構(gòu)建2024-10-10vue.js踩坑之ref引用細(xì)節(jié)點(diǎn)講解
這篇文章主要介紹了vue.js踩坑之ref引用細(xì)節(jié)點(diǎn)講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03Vuex 單狀態(tài)庫(kù)與多模塊狀態(tài)庫(kù)詳解
這篇文章主要介紹了Vuex 單狀態(tài)庫(kù)與多模塊狀態(tài)庫(kù)詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05