vue3+vite跨域404问题
0
悬赏园豆：30
[待解决问题]
很奇怪，之前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，，，
哪位大佬能帮忙看看啊啊啊啊
所有回答(3)
1
统一一下你的接口哈，全部改成 http://www.aaaa.cn/api/admin/jiekou1 这种形式，去掉什么jjy
然后代理里面
'/api': {
target: 'http://www.aaaa.cn/api',
changeOriange: true,
rewrite: (path) => path.replace(/^/api/, '')
},
axios里url: '/api/admin/jiekou1',这样去访问
你非要加什么jjy的话，那你的代理地址就不要写/api，比如你的API地址是：
http://www.aaaa.cn/jjy/api/admin/jiekou1
那么，
'/jjy': {
target: 'http://www.aaaa.cn/jjy',
changeOriange: true,
rewrite: (path) => path.replace(/^/jjy/, '')
},
axios里url: '/jjy/api/admin/jiekou1',这样去访问
奇葩的写法，你不如改成
http://www.aaaa.cn/jjyapi/admin/jiekou1
然后
'/jjyapi': {
target: 'http://www.aaaa.cn/jjyapi',
changeOriange: true,
rewrite: (path) => path.replace(/^/jjyapi/, '')
},
axios里url: '/jjyapi/admin/jiekou1',这样去访问
明白为什么了吧，rewrite会将请求里的api替换掉，你代理地址是api，请求路径又有api，重复了，被影响了
要么合并成为jjyapi，要么去掉jjy
谢谢谢谢，虽然亲测无效，但已经改好了，不过后端接口路径不一致这个确实，但我改不了
0
问题可能出在你的路径重写配置上。在 Vite 中，你应该使用 rewrite 而不是 pathRewrite 来处理路径重写。
尝试将你的 Vite 配置修改为：
javascript
Copy code
// vite.config.js
export default {
server: {
proxy: {
'/api': {
target: 'http://www.aaaa.cn/jjy',
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, ''),
},
},
},
};
然后，对于 axios 二次封装的接口，应该保留完整的路径，不要再加上 /api，因为 Vite 的代理已经帮你重写了。
javascript
Copy code
// axios 二次封装
export function aaaa(params) {
return service({
url: '/admin/jiekou1', // 注意这里不再加上 /api
method: 'post',
data: params,
});
}
这样应该能解决你遇到的问题。确保修改后重新启动 Vite 服务器，然后测试接口是否正常工作。
谢谢谢谢，这个方法试过但不行，最后配置了两个baseurl解决了
0
不懂的来问一问
这个是官方例子：
'/api': {
target: 'http://www.aaaa.cn/jjy',
changeOriange: true,
pathRewrite: {
'^/api': ''
}
}
// 请求
url: '/api/jiekou'
按照这个规则，实际请求的api不应该是http://www.aaaa.cn/jjy/jiekou吗？是不是因为后台api路由同时适配了/jjy/jiekou和/jjy/api/jiekou；
但是对于/api/admin/jiekou1，如果按照上面的规则，实际的请求应该是http://www.aaaa.cn/jjy/admin/jiekou1，但是后台api路由不支持，所以才有这个问题？
第二个问题，加上 rewrite: (path) => path.replace(/^/api/, '') 之后原先正常的请求也404的就不能理解了，同问是啥原因
不知道，实际请求的时候后面路径是对的，但就是404
