很奇怪,之前vite里是这样配置的:
‘/api’: { target: ‘http://www.aaaa.cn/jjy', changeOriange: true, pathRewrite: { ‘^/api’: ‘’ } },
然后调用的接口是这样的: http://www.aaaa.cn/jjy/api/jiekou
axios二次封装是这样的: export function aaaa(params) { return service({ url: ‘/api/jiekou’, method: ‘post’, data: params, }) }
//////////////////////////以上都没有问题,直到出现下面这个接口: http://www.aaaa.cn/jjy/api/admin/jiekou1
这个接口的封装路径是 url: ‘/api/admin/jiekou1’,
然后调用这个接口的时候就开始报404..............
后来网上查了一下,又在vite配置里加了一句path路径的 rewrite: (path) => path.replace(/^/api/, ‘’)
然后,原先报404的接口能用了,原先能用的接口全报404,,,
根据你描述的情况,似乎在配置 Vite 时出现了一些混淆和错误。让我们逐步检查和修正配置,以确保接口路径重写和代理设置正确生效。
首先,确保你的 Vite 配置文件中针对代理和路径重写的设置正确。通常,这些配置应该放在 vite.config.js 或者 vite.config.ts 文件中,具体如下:
vite.config.js
vite.config.ts
// vite.config.js or vite.config.ts import { defineConfig } from 'vite'; export default defineConfig({ server: { proxy: { '/api': { target: 'http://www.aaaa.cn/jjy', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, }, }, });
确保 Axios 的封装在调用接口时正确使用了代理配置。根据你的描述,/api/jiekou 和 /api/admin/jiekou1 是两个不同的接口路径,需要正确设置代理。
/api/jiekou
/api/admin/jiekou1
// axios 封装文件 import axios from 'axios'; const service = axios.create({ baseURL: '/', // 或者设置为空字符串,因为代理已经在 Vite 中配置了 timeout: 5000, // 请求超时时间 }); export function aaaa(params) { return service({ url: '/api/jiekou', // 正确设置基础路径,代理会自动转发到 target + '/api/jiekou' method: 'post', data: params, }); } // 调用 /api/admin/jiekou1 接口的示例 export function adminJiekou1(params) { return service({ url: '/api/admin/jiekou1', // 同样要正确设置基础路径 method: 'post', data: params, }); }
rewrite
/api
proxy
changeOrigin: true
通过以上步骤,你应该能够正确配置 Vite 和 Axios,使得你的接口能够按预期工作,避免 404 错误和其他路径问题。