Vue3配置axios跨域?qū)崿F(xiàn)過(guò)程解析
更新時(shí)間：2020年11月25日 11:48:34 作者：-零
這篇文章主要介紹了Vue3配置axios跨域?qū)崿F(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
實(shí)現(xiàn)跨域共3個(gè)步驟：
1，vue3.0根目錄下創(chuàng)建vue.config.js文件；
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://you.163.com/', //接口域名
changeOrigin: true, //是否跨域
ws: true, //是否代理 websockets
secure: true, //是否https接口
pathRewrite: { //路徑重置
'^/api': ''
}
}
}
}
};
2，將上述代碼塊寫(xiě)入其中；
如圖：
3，將api接口放入請(qǐng)求的url中；
使用頁(yè)面的代碼塊：
<template>
<div>
<H1>TEST</H1>
<p>{{data}}</p>
</div>
</template>
<script>
import axis from 'axios';
export default {
name: 'Test',
data() {
return {
data: {},
};
},
methods: {
getData() {
axis.get('/api/xhr/search/queryHotKeyWord.json')//axis后面的.get可以省略；
.then(
(response) => {
console.log(response);
this.data = response;
})
.catch(
(error) => {
console.log(error);
});
},
},
mounted() {
this.getData();
},
};
</script>
<style scoped>
</style>
代碼解析：
瀏覽器頁(yè)面：
剩下的就是把數(shù)據(jù)渲染到頁(yè)面了。
實(shí)際示例
vue3 8080端口請(qǐng)求flask8081端口服務(wù)數(shù)據(jù)：
module.exports = {
devServer: {
host: '0.0.0.0',
port: 8080,
open: true,
proxy: {
'/api/testcase/': {
target: 'http://127.0.0.1:8081/', //接口域名
changeOrigin: true, //是否跨域
ws: true, //是否代理 websockets
secure: true, //是否https接口
pathRewrite: { //路徑重置
'^/api/testcase/': '/api/testcase/'
}
}
},
},
}
flask接口地址:
# http://127.0.0.1:8081/api/testcase/@app.route('/api/testcase/')def alltestcase(): pass
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用jsMind思維導(dǎo)圖的實(shí)戰(zhàn)指南
jsMind是一個(gè)顯示/編輯思維導(dǎo)圖的純javascript類(lèi)庫(kù),其基于 html5的canvas進(jìn)行設(shè)計(jì),這篇文章主要給大家介紹了關(guān)于vue使用jsMind思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下2023-01-01
在開(kāi)發(fā)Vue應(yīng)用時(shí),我們經(jīng)常需要在多個(gè)組件中復(fù)用一些通用的函數(shù)或方法,這些函數(shù)可能是我們自己編寫(xiě)的工具函數(shù),也可能是從第三方庫(kù)中導(dǎo)入的,下面我們就來(lái)看看如何正確引用和使用外部方法吧2024-01-01
vue動(dòng)態(tài)路由:路由參數(shù)改變,視圖不更新問(wèn)題的解決
今天小編就為大家分享一篇vue動(dòng)態(tài)路由:路由參數(shù)改變,視圖不更新問(wèn)題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue3實(shí)現(xiàn)Element Plus表格的多選功能與條件操作
Element-plus是ElementUI的升級(jí)版,是一套基于vue2與vue3的桌面端組件庫(kù),它提供了豐富的組件幫助開(kāi)發(fā)人員快速構(gòu)建功能強(qiáng)大、風(fēng)格統(tǒng)一的頁(yè)面,本文給大家介紹了Vue3實(shí)現(xiàn)Element Plus表格的多選功能與條件操作,需要的朋友可以參考下2024-08-08
響應(yīng)式就是當(dāng)對(duì)象本身(對(duì)象的增刪值)或者對(duì)象屬性(重新賦值)發(fā)生變化時(shí),將會(huì)運(yùn)行一些函數(shù),最常見(jiàn)的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue3+element-plus?Dialog對(duì)話框的使用與setup?寫(xiě)法的用法
這篇文章主要介紹了vue3+element-plus?Dialog對(duì)話框的使用?與?setup?寫(xiě)法的使用,本文通過(guò)兩種方式結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
關(guān)于vue-router路徑計(jì)算問(wèn)題
這篇文章主要介紹了關(guān)于vue-router路徑計(jì)算問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
elementUI select組件value值注意事項(xiàng)詳解
這篇文章主要介紹了elementUI select組件value值注意事項(xiàng)詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
詳解VueRouter進(jìn)階之導(dǎo)航鉤子和路由元信息
本篇文章主要介紹了詳解VueRouter進(jìn)階之導(dǎo)航鉤子和路由元信息，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
解決Vue控制臺(tái)報(bào)錯(cuò)Failed to mount component: tem
這篇文章主要介紹了解決Vue控制臺(tái)報(bào)錯(cuò)Failed to mount component: template or render function not defined.問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06