Vue3配置axios跨域?qū)崿F(xiàn)過程解析
更新時間：2020年11月25日 11:48:34 作者：-零
這篇文章主要介紹了Vue3配置axios跨域?qū)崿F(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
實(shí)現(xiàn)跨域共3個步驟：
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，將上述代碼塊寫入其中；
如圖：
3，將api接口放入請求的url中；
使用頁面的代碼塊：
<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>
代碼解析：
瀏覽器頁面：
剩下的就是把數(shù)據(jù)渲染到頁面了。
實(shí)際示例
vue3 8080端口請求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
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vuex中的Mutations的具體使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vuejs項(xiàng)目打包之后的首屏加載優(yōu)化及打包之后出現(xiàn)的問題
這篇文章主要介紹了vuejs項(xiàng)目打包之后的首屏加載優(yōu)化及打包之后可能出現(xiàn)的問題,需要的朋友可以參考下2018-04-04
Fragment 占位組件不生成標(biāo)簽與路由組件lazyLoad案例
這篇文章主要為大家介紹了Fragment 占位組件不生成標(biāo)簽與路由組件lazyLoad案例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
MVVM是Model-View-ViewModel的縮寫，MVVM是一種設(shè)計(jì)思想，這篇文章主要介紹了Vue生命周期和MVVM框架,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue實(shí)現(xiàn)戶籍管理系統(tǒng)，戶籍信息的添加與刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了Nuxt頁面級緩存的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡易折疊面板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
基于vue-cli、elementUI的Vue超簡單入門小例子（推薦）
這篇文章主要介紹了基于vue-cli、elementUI的Vue超簡單入門小例子，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue 生成gzip壓縮包部署到nginx服務(wù)器，如果我們把web網(wǎng)站資源進(jìn)行g(shù)zip壓縮后進(jìn)行傳輸給瀏覽器，這樣就能加快網(wǎng)站資源的加載速度，這篇文章主要介紹了vue生成gzip壓縮包部署到nginx,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了詳解解決Vue相同路由參數(shù)不同不會刷新的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10