快捷導(dǎo)航

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

更新時間：2024年05月16日 14:22:34 作者：娃哈哈哈哈呀

跨域（Cross-Origin）是指在瀏覽器中,當(dāng)前網(wǎng)頁的協(xié)議、域名或端口與請求目標(biāo)的協(xié)議、域名或端口不相同,即存在跨域請求的情況,這篇文章主要介紹了uniapp中安裝axios并解決跨域問題小結(jié),需要的朋友可以參考下

1、安裝axios

npm install axios

2、導(dǎo)入

在main.js中導(dǎo)入使用

import axios from 'axios';
// 創(chuàng)建一個名為 $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.前端如何解決跨域問題？

在項目根目錄下創(chuàng)建vue.config.js文件并增加以下內(nèi)容：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:9090',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

這段代碼是一個 webpack 配置文件，通常用于 Vue.js 項目。它的作用是配置開發(fā)服務(wù)器的代理，用于將請求轉(zhuǎn)發(fā)到指定的目標(biāo)服務(wù)器。

具體解釋如下：

module.exports: 這是 Node.js 中用于導(dǎo)出模塊的語法，表明這是一個模塊的導(dǎo)出。
devServer: 這是 webpack-dev-server 的配置項，用于配置開發(fā)服務(wù)器。
proxy: 這是開發(fā)服務(wù)器的代理配置，用于將某些請求代理到另一個服務(wù)器。
'/api': 表示需要被代理的路徑前綴。即，當(dāng)請求路徑以 '/api' 開頭時，將會被代理。
target: 'http://localhost:9090': 這是代理的目標(biāo)服務(wù)器地址，即請求將被轉(zhuǎn)發(fā)到這個地址。
changeOrigin: true: 這是一個布爾值，表示是否改變請求頭中的 origin 字段為目標(biāo) URL，通常在跨域請求時設(shè)置為 true。
pathRewrite: {'^/api': ''}: 這是一個對象，用于重寫路徑。它的作用是將請求路徑中的 '/api' 替換為空字符串，即將 '/api' 去掉，這樣最終發(fā)送到目標(biāo)服務(wù)器的請求路徑就不包含 '/api' 了。

綜上所述，這段代碼的作用是將以 '/api' 開頭的請求代理到目標(biāo)服務(wù)器 http://localhost:9090，同時將請求路徑中的 '/api' 去掉。

到此這篇關(guān)于在uniapp中如何安裝axios并解決跨域問題的文章就介紹到這了,更多相關(guān)uniapp安裝axios內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: