uniapp中安裝axios并解決跨域問題小結(jié)
1、安裝axios
npm install axios

2、導(dǎo)入
在main.js中導(dǎo)入使用
import axios from 'axios'; // 創(chuàng)建一個(gè)名為 $axios 的全局變量 Vue.prototype.$axios = axios
3、使用(發(fā)請求)
<template>
<view class="container">
<view class="form">
<view class="form-item">
<text class="label">用戶名:</text>
<input type="text" v-model="userId" class="input" placeholder="請輸入用戶名">
</view>
<view class="form-item">
<text class="label">密碼:</text>
<input type="password" v-model="password" class="input" placeholder="請輸入密碼">
</view>
<view class="form-item">
<button @click="login" class="button">登錄</button>
</view>
<view v-if="error" class="error">{{ error }}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userId: '',
password: '',
error: ''
};
},
methods: {
login() {
// 發(fā)送登錄請求
this.$axios({
method: "post",
url: "http://localhost:8080/api/user/login",
data: {
userId: this.userId,
password: this.password,
},
})
.then((res) => {
console.log(res);
if (res.data.code == "200") {
// 登錄成功,顯示成功提示信息
this.$message({
message: res.data.message,
type: "success",
});
// 跳轉(zhuǎn)到后臺主頁 (編程式導(dǎo)航)
this.$router.push("/pages/index/index");
}
});
}
}
}
</script>4.解決跨域問題
如下圖顯示就是跨域問題

1.為什么要解決跨域問題?
跨域(Cross-Origin)是指在瀏覽器中,當(dāng)前網(wǎng)頁的協(xié)議、域名或端口與請求目標(biāo)的協(xié)議、域名或端口不相同,即存在跨域請求的情況。
2.前端如何解決跨域問題?
在項(xiàng)目根目錄下創(chuàng)建vue.config.js文件并增加以下內(nèi)容:

module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:9090',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};這段代碼是一個(gè) webpack 配置文件,通常用于 Vue.js 項(xiàng)目。它的作用是配置開發(fā)服務(wù)器的代理,用于將請求轉(zhuǎn)發(fā)到指定的目標(biāo)服務(wù)器。
具體解釋如下:
module.exports: 這是 Node.js 中用于導(dǎo)出模塊的語法,表明這是一個(gè)模塊的導(dǎo)出。devServer: 這是 webpack-dev-server 的配置項(xiàng),用于配置開發(fā)服務(wù)器。proxy: 這是開發(fā)服務(wù)器的代理配置,用于將某些請求代理到另一個(gè)服務(wù)器。'/api': 表示需要被代理的路徑前綴。即,當(dāng)請求路徑以 '/api' 開頭時(shí),將會被代理。target: 'http://localhost:9090': 這是代理的目標(biāo)服務(wù)器地址,即請求將被轉(zhuǎn)發(fā)到這個(gè)地址。changeOrigin: true: 這是一個(gè)布爾值,表示是否改變請求頭中的 origin 字段為目標(biāo) URL,通常在跨域請求時(shí)設(shè)置為 true。pathRewrite: {'^/api': ''}: 這是一個(gè)對象,用于重寫路徑。它的作用是將請求路徑中的 '/api' 替換為空字符串,即將 '/api' 去掉,這樣最終發(fā)送到目標(biāo)服務(wù)器的請求路徑就不包含 '/api' 了。
綜上所述,這段代碼的作用是將以 '/api' 開頭的請求代理到目標(biāo)服務(wù)器 http://localhost:9090,同時(shí)將請求路徑中的 '/api' 去掉。
到此這篇關(guān)于在uniapp中如何安裝axios并解決跨域問題的文章就介紹到這了,更多相關(guān)uniapp安裝axios內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript上傳文件時(shí)不用刷新頁面方法總結(jié)(推薦)
這篇文章主要介紹了JavaScript上傳文件時(shí)不用刷新頁面方法,用js+css代碼詳細(xì)介紹了操作過程,需要的朋友可以參考下2017-08-08
微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動畫效果實(shí)例
小程序日益增多的情況下,UI風(fēng)格顯得越來越重要,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動畫效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
JavaScript前端開發(fā)之實(shí)現(xiàn)二進(jìn)制讀寫操作
這篇文章主要介紹了JavaScript前端開發(fā)之實(shí)現(xiàn)二進(jìn)制讀寫操作的相關(guān)資料,需要的朋友可以參考下2015-11-11
微信小程序wxss如何引用外部CSS文件以及iconfont
這篇文章主要給大家介紹了關(guān)于微信小程序wxss如何引用外部CSS文件以及iconfont的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
JS在IE和FireFox之間常用函數(shù)的區(qū)別小結(jié)
IE和FireFox之間常用函數(shù)的區(qū)別小結(jié),需要的朋友可以參考下。2010-03-03
淺談js控制li標(biāo)簽排序問題 js調(diào)用php函數(shù)的方法
下面小編就為大家?guī)硪黄獪\談js控制li標(biāo)簽排序問題 js調(diào)用php函數(shù)的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
JavaScript+Java實(shí)現(xiàn)HTML頁面轉(zhuǎn)為PDF文件保存的方法
借助iText這個(gè)Java庫,我們可以將HTML文件保存為圖片文件進(jìn)而轉(zhuǎn)換成PDF格式,接下來就來具體看下JavaScript+Java實(shí)現(xiàn)HTML頁面轉(zhuǎn)為PDF文件保存的方法2016-05-05

