vue3 vite+axios 代理配置和axios封装（请求404bug解决）

axios封装

根据不同项目叠加需求

import axios from 'axios'

// export 将 service 传出去
export const service = axios.create({
    
    
	// baseURL: process.env.VUE_APP_BASE_API, //变量地址
	baseURL:'api_v3', //重点，此处与代理保持一致！！！！
	timeout: 30000, 
	withCredentials: true, // 异步请求携带cookie
	headers: {
    
    
			// 设置后端需要的传参类型
			'Content-Type': 'application/json',
			'token': 'your token',
			'X-Requested-With': 'XMLHttpRequest',
		},
})

// request interceptor
service.interceptors.request.use(
	function (config) {
    
    
		// 在发送请求之前做些什么
		return config
	},
	function (error) {
    
    
		// 对请求错误做些什么
		console.log(error)
		return Promise.reject(error)
	}
)

// 拦截器
service.interceptors.response.use(
	function (response) {
    
    
			console.log(response)
			// 2xx 范围内的状态码都会触发该函数。
			// 对响应数据做点什么
			// dataAxios 是 axios 返回数据中的 data
			const dataAxios = response.data
			// 这个状态码是和后端约定的
			const code = dataAxios.reset
			return dataAxios
		},
		function (error) {
    
    
			// 超出 2xx 范围的状态码都会触发该函数。
			// 对响应错误做点什么
			console.log(error)
			return Promise.reject(error)
		}
)

配置代理

在根目录创建vite.config.js文件

const path = require('path')

module.exports = {
    
    
    hostname: '0.0.0.0',
    port: 3000,
    // 反向代理
	proxy: {
    
    
		'/api_v3': {
    
    
			target: 'http://XXXX.cn',
			changeOrigin: true,
			// rewrite: path => path.replace(/^\/api_v3/, '')该写法俺的项目出错了！！，找了非常久的原因，换回以前的
			pathRewrite: {
    
    
			  // 路径重写
			  '/api_v3': '' // 用'/api'代替target里面的地址
			}
		}
	}
    
}

单页面使用

import {
    
    service } from '../request/http' 

function get_data() {
    
    
		service.get('/XXXX.php').then(res=>{
    
    
		
		})
	}