vue3 axios baseURL 配置后为什么还是undefined vue axios 403

转载

mob64ca14079fb3 2023-12-26 21:10:21

文章标签 vue-cli3 前端 ios 根目录跨域 文章分类 iOS 移动开发

文章目录

前言
一、接口配置，以axios为例

1.安装axios，打开项目根目录，执行命令：
2.设置axios请求配置文件，在src目录下新建request文件夹，然后新建http.js文件，在里边放入以下代码：
3. 编写接口文件，在src目录下新建api文件夹，然后新增index.js文件，里边放入以下代码：
4.配置本地跨域，在项目根目录里的vue.config.js里加入以下代码，如果没有这个文件新增一个
5.使用方式如下，在Home.vue里加入以下代码：

二、配置全局变量

1.在项目根目录下新增.env文件，里边放入以下代码
2.使用方式如下，在模板文件比如Home.vue里编写以下代码：

结语

前言

工欲善其事必先利其器
本文所采用技术栈：vue3+vue-router4+vuex4+vant3，接上篇文章的准备工作，这次我们就接口配置，本地跨域处理，以及配置全局变量，如何去做，展开讨论。

一、接口配置，以axios为例

1.安装axios，打开项目根目录，执行命令：

npm install axios

2.设置axios请求配置文件，在src目录下新建request文件夹，然后新建http.js文件，在里边放入以下代码：

import axios from "axios";
import {Toast} from 'vant';
import router from '../router/index';

axios.defaults.timeout = 5000
//baseURL将自动加在接口url前面
axios.defaults.baseURL = '/api'
//请求headers里加入token，供接口做登录判断
axios.defaults.headers['token'] = localStorage.getItem('token') || ''
axios.interceptors.request.use((config) => {
    return config
}, (error) => {
    Toast.fail(error)
    return Promise.reject(error)
})
axios.interceptors.response.use((res) => {
    //code=1，直接返回数据
    if (res.data.code == 1) {
        return res.data
    } else if (res.data.code == 4011) {
        //这里是未登录逻辑
        router.push('/login');
    } else if (res.data.code == 0) {
        //这里是获取数据失败逻辑
        Toast(res.data.msg);
    } else {
        Toast(res.data.msg);
        return Promise.reject(res)
    }
    return res.data
}, (error) => {
    Toast(error)
    return Promise.reject(error);
})
export default axios

3. 编写接口文件，在src目录下新建api文件夹，然后新增index.js文件，里边放入以下代码：

import axios from '../request/http.js';
export function recommend(params) {
    return axios.post('/index/recommend', params);
}
export function recommendGoods(params) {
    return axios.post('/index/recommendGoods', params);
}

export function getLiveCategory() {
    return axios.post('/index/getLiveCategory');
}

export function getIndex() {
    return axios.post('/index/index');
}

4.配置本地跨域，在项目根目录里的vue.config.js里加入以下代码，如果没有这个文件新增一个

module.exports = {
    publicPath: './', // 根路径
    outputDir: 'dist', // 构建输出目录
    assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)
    lintOnSave: false, // 是否开启eslint保存检测,有效值（true||false||error)
    devServer: {
        port: 80,
        proxy: {
            // 配置跨域因为我们给url加上了前缀/api，我们访问/index/getNewsList就当于访问了：http://localhost:81/api/index/getNewsList。
            // 在proxy中拦截了/api,并把/api及其前面的所有替换成了target中的内容，因此实际访问Url是http://vuedemoapi.com/api/index/getNewsList。
            '/api': {
                target: 'http://vuedemoapi.com/api',
                ws: true, // 是否跨域
                changeOrigin: true,
                secure: false,
                // 重写地址
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

5.使用方式如下，在Home.vue里加入以下代码：

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {onMounted} from "vue"
import {getIndex} from "../api/index";

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  setup(){
    onMounted(()=>{
      getIndex().then((res)=>{
        console.log(res)
      })
    })
  }
}
</script>

二、配置全局变量

1.在项目根目录下新增.env文件，里边放入以下代码

VUE_APP_a=http://vuedemoapi.com
VUE_APP_domain=http://vuedemoapi.com
VUE_APP_TITLE=标题名字

变量必须以VUE_APP_开头，设置完成后，重启下脚手架

2.使用方式如下，在模板文件比如Home.vue里编写以下代码：

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {onMounted} from "vue"

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  setup(){
    const domain=process.env.VUE_APP_a
    console.log(process.env.VUE_APP_domain)
    console.log(process.env.VUE_APP_TITLE)
    return {
      domain
    }
  }
}
</script>

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <div>{{domain}}</div>
  </div>
</template>