亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間: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ā)都在一臺(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è)工具方法技巧

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

    vue.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-10
  • vue.js踩坑之ref引用細(xì)節(jié)點(diǎn)講解

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

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

    Vuex 單狀態(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-12
  • 淺析Vue3中的計(jì)算屬性和屬性監(jiān)聽

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

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

    解決vuecli3中img src 的引入問題

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

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

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

    Vue3注冊(cè)全局組件的使用方法

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

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

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

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

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

最新評(píng)論