在前后端分離開發(fā)中，需要前端調(diào)用后端api并進行內(nèi)容顯示，如果前后端開發(fā)都在一臺主機上，則會由于瀏覽器的同源策略限制，出現(xiàn)跨域問題(協(xié)議、域名、端口號不同等)，導(dǎo)致不能正常調(diào)用api接口，給開發(fā)帶來不便。

封裝api請求

import axios from ’axios’//axios.create創(chuàng)建一個axios實例，并對該實例編寫配置，后續(xù)所有通過實例發(fā)送的請求都受當前配置約束const $http = axios.create({ baseURL: ’’, timeout: 1000, //headers: {’X-Custom-Header’: ’foobar’}});// 添加請求攔截器$http.interceptors.request.use(function (config) { // 在發(fā)送請求之前做些什么 return config;}, function (error) { // 對請求錯誤做些什么 return Promise.reject(error);});// 添加響應(yīng)攔截器$http.interceptors.response.use(function (response) { // 對響應(yīng)數(shù)據(jù)做點什么 return response.data; //返回響應(yīng)數(shù)據(jù)的data部分}, function (error) { // 對響應(yīng)錯誤做點什么 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文件并進行配置

vue.config.js文件

module.exports = { devServer: {host: ’localhost’,//主機號port: 8081, //端口號open: true, //自動打開瀏覽器proxy: { ’/api’: {target: ’http://localhost:8080/’, //接口域名changeOrigin: true, //是否跨域ws: true, //是否代理 websocketssecure: true, //是否https接口pathRewrite: { //路徑重置 ’^/api’: ’/’} }} }};

2、修改api請求

api調(diào)用函數(shù)

export const getCourses = () => { return $http.get(’/api/teacher/courses’)}

在這里，因為vue.config.js配置了接口域名，所以此處url只需要寫余下來的部分

url完全體

http://localhost:8080/teacher/courses

但是這里因為運用到代理，所以在余下的部分(即’/teacher/courses’)前加上’/api’,組成’/api/teacher/courses’

此時跨域問題解決，前端可以從后端接口拿到數(shù)據(jù)并顯示

問題解決！

到此這篇關(guān)于Vue+SpringBoot前后端分離中的跨域問題的文章就介紹到這了,更多相關(guān)vue SpringBoot前后端分離跨域內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！