Vue+SpringBoot前后端分離中的跨域問題
在前后端分離開發(fā)中,需要前端調(diào)用后端api并進(jìn)行內(nèi)容顯示,如果前后端開發(fā)都在一臺主機(jī)上,則會(huì)由于瀏覽器的同源策略限制,出現(xiàn)跨域問題(協(xié)議、域名、端口號不同等),導(dǎo)致不能正常調(diào)用api接口,給開發(fā)帶來不便。
封裝api請求
import axios from 'axios'
//axios.create創(chuàng)建一個(gè)axios實(shí)例,并對該實(shí)例編寫配置,后續(xù)所有通過實(shí)例發(fā)送的請求都受當(dāng)前配置約束
const $http = axios.create({
baseURL: '',
timeout: 1000,
//headers: {'X-Custom-Header': 'foobar'}
});
// 添加請求攔截器
$http.interceptors.request.use(function (config) {
// 在發(fā)送請求之前做些什么
return config;
}, function (error) {
// 對請求錯(cuò)誤做些什么
return Promise.reject(error);
});
// 添加響應(yīng)攔截器
$http.interceptors.response.use(function (response) {
// 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
return response.data; //返回響應(yīng)數(shù)據(jù)的data部分
}, function (error) {
// 對響應(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端口號,后端使用8080端口號,前端通過調(diào)用api請求數(shù)據(jù)失敗
postman測試此api接口正常

如何解決同源問題?
1、在vue根目錄下新建vue.config.js文件并進(jìn)行配置

vue.config.js文件
module.exports = {
devServer: {
host: 'localhost', //主機(jī)號
port: 8081, //端口號
open: true, //自動(dòng)打開瀏覽器
proxy: {
'/api': {
target: 'http://localhost:8080/', //接口域名
changeOrigin: true, //是否跨域
ws: true, //是否代理 websockets
secure: true, //是否https接口
pathRewrite: { //路徑重置
'^/api': '/'
}
}
}
}
};
2、修改api請求
api調(diào)用函數(shù)
export const getCourses = () => {
return $http.get('/api/teacher/courses')
}
在這里,因?yàn)関ue.config.js配置了接口域名,所以此處url只需要寫余下來的部分
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue中使用element-ui給按鈕綁定一個(gè)單擊事件實(shí)現(xiàn)點(diǎn)擊按鈕就彈出dialog對話框
最近遇到了個(gè)需求是使用element-ui插件編寫頁面,點(diǎn)擊按鈕,彈出對話框,這篇文章主要給大家介紹了關(guān)于Vue中使用element-ui給按鈕綁定一個(gè)單擊事件實(shí)現(xiàn)點(diǎn)擊按鈕就彈出dialog對話框的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue.js el-table動(dòng)態(tài)單元格列合并方式
這篇文章主要介紹了vue.js el-table動(dòng)態(tài)單元格列合并方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue-cli3 karma單元測試的實(shí)現(xiàn)
這篇文章主要介紹了vue-cli3 karma單元測試的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
在Vue中實(shí)現(xiàn)網(wǎng)頁截圖與截屏功能詳解
在Web開發(fā)中,有時(shí)候需要對網(wǎng)頁進(jìn)行截圖或截屏,Vue作為一個(gè)流行的JavaScript框架,提供了一些工具和庫,可以方便地實(shí)現(xiàn)網(wǎng)頁截圖和截屏功能,本文將介紹如何在Vue中進(jìn)行網(wǎng)頁截圖和截屏,需要的朋友可以參考下2023-06-06
Spring boot 和Vue開發(fā)中CORS跨域問題解決
這篇文章主要介紹了Spring boot 和Vue開發(fā)中CORS跨域問題解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09

