欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue+SpringBoot前后端分離中的跨域問題

 更新時間:2021年08月12日 09:25:34   作者:HuskySir  
在前后端分離開發(fā)中,需要前端調(diào)用后端api并進(jìn)行內(nèi)容顯示,所以本文就介紹了Vue+SpringBoot前后端分離跨域問題,感興趣的可以了解一下

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

封裝api請求

import axios from 'axios'

//axios.create創(chuàng)建一個axios實例,并對該實例編寫配置,后續(xù)所有通過實例發(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) {
    // 對請求錯誤做些什么
    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文件并進(jìn)行配置

vue.config.js文件

module.exports = {
    devServer: {
        host: 'localhost',        //主機(jī)號
        port: 8081,               //端口號
        open: true,               //自動打開瀏覽器
        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')
}

在這里,因為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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 從Element日期組件源碼中學(xué)到的兩個工具方法技巧

    從Element日期組件源碼中學(xué)到的兩個工具方法技巧

    這篇文章主要介紹了從Element日期組件源碼中學(xué)到的兩個工具方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-08-08
  • vue.config.js中配置configureWebpack和chainWebpack以及一些常用的配置

    vue.config.js中配置configureWebpack和chainWebpack以及一些常用的配置

    configureWebpack和chainWebpack都是Vue CLI中用于修改Webpack配置的工具,configureWebpack可以通過對象或函數(shù)修改配置,簡單直接;chainWebpack則使用WebpackChainAPI,適合復(fù)雜配置,兩者可以結(jié)合使用,以達(dá)到更精細(xì)的配置需求,幫助開發(fā)者優(yōu)化項目構(gòu)建
    2024-10-10
  • vue.js踩坑之ref引用細(xì)節(jié)點講解

    vue.js踩坑之ref引用細(xì)節(jié)點講解

    這篇文章主要介紹了vue.js踩坑之ref引用細(xì)節(jié)點講解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • Vuex 單狀態(tài)庫與多模塊狀態(tài)庫詳解

    Vuex 單狀態(tài)庫與多模塊狀態(tài)庫詳解

    這篇文章主要介紹了Vuex 單狀態(tài)庫與多模塊狀態(tài)庫詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-12-12
  • 淺析Vue3中的計算屬性和屬性監(jiān)聽

    淺析Vue3中的計算屬性和屬性監(jiān)聽

    這篇文章主要為大家詳細(xì)介紹了Vue3中的計算屬性和屬性監(jiān)聽的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-08-08
  • 解決vuecli3中img src 的引入問題

    解決vuecli3中img src 的引入問題

    這篇文章主要介紹了解決vuecli3中img src 的引入問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue3中使用富文本編輯器的方法詳解

    Vue3中使用富文本編輯器的方法詳解

    這篇文章主要為大家詳細(xì)介紹了如何在Vue3中使用富文本編輯器,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以參考一下
    2024-01-01
  • Vue3注冊全局組件的使用方法

    Vue3注冊全局組件的使用方法

    例如組件使用頻率非常高,幾乎每個頁面都在使用便可以封裝成全局組件,下面通過本文給大家介紹Vue3注冊全局組件的相關(guān)知識,感興趣的朋友一起看看吧
    2024-01-01
  • vue實現(xiàn)雙向數(shù)據(jù)綁定

    vue實現(xiàn)雙向數(shù)據(jù)綁定

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)雙向數(shù)據(jù)綁定,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-05-05
  • vue中的自定義屬性并獲得屬性的值方式

    vue中的自定義屬性并獲得屬性的值方式

    這篇文章主要介紹了vue中的自定義屬性并獲得屬性的值方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06

最新評論