[JavaScript知识库]vite+vue3-js项目配置axios及跨域

目录

安装axios

封装请求

全局引用

配置跨域

请求测试

测试结果

折腾了几次终于弄好了 记录一下?

vite创建vue3项目啥的就不赘述了 可以看这篇blog（附router和vuex安装）

安装axios

npm install axios

封装请求

此处是在src/assets/js下新建的js文件封装，引用时候要从这里引用

不准备用qs库可以不安装 ，代码里用到的地方修改下就行

封装我也不擅长 ，这里随便从网上扒了一份，

大神们有看到高级点的封装内容给我发个链接，谢谢了

import axios from "axios";
import qs from "qs";


axios.defaults.baseURL = '' 

//post请求头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
//设置超时
axios.defaults.timeout = 10000;

axios.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

axios.interceptors.response.use(
    response => {
        if (response.status == 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    error => {

        console.log(error);
    }
);
export default {
    post(url, data) {
        return new Promise((resolve, reject) => {
            axios({
                    method: 'post',
                    url,
                    data: qs.stringify(data),
                })
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err)
                });
        })
    },

    get(url, data) {
        return new Promise((resolve, reject) => {
            axios({
                    method: 'get',
                    url,
                    params: data,
                })
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
};

全局引用

修改下main.js

妈的我就是在这里做挂载的时候写错了顺序? 在申明app之前做了全局挂载折腾我好几小时没搞出来

import { createApp } from 'vue'
import App from './App.vue'
import axios from "./assets/lib/axios";


const app = createApp(App)
app.config.globalProperties.$h = axios;
app.mount('#app')

配置跨域

修改vite.config.js文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
      host: '0.0.0.0',
      port: 8080,
      proxy: {
        '/api': {
          target: '实际请求地址',	//实际请求地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        },
      }
    }
})

请求测试

因为只是做个测试 所以就直接在app.vue页面操作了

<template>
	<img alt="Vue logo" src="./assets/logo.png" />
	<HelloWorld msg="Hello Vue 3 + Vite" /> 
</template>

<script>
	import HelloWorld from './components/HelloWorld.vue'
	export default {
		mounted() {
			this.$h.get(`api/接口地址`).then(res => {
				console.log(res)
			})
		}
	}
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>

测试结果