首页 新闻 会员 周边

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,,,

哪位大佬能帮忙看看啊啊啊啊

Takagesan的主页 Takagesan | 初学一级 | 园豆:172
提问于:2023-08-05 09:08
< >
分享
所有回答(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

顾星河 | 园豆:7173 (大侠五级) | 2023-08-05 11:36

谢谢谢谢,虽然亲测无效,但已经改好了,不过后端接口路径不一致这个确实,但我改不了

支持(0) 反对(0) Takagesan | 园豆:172 (初学一级) | 2023-08-06 12:03
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 服务器,然后测试接口是否正常工作。

Technologyforgood | 园豆:5675 (大侠五级) | 2023-08-05 20:33

谢谢谢谢,这个方法试过但不行,最后配置了两个baseurl解决了

支持(0) 反对(0) Takagesan | 园豆:172 (初学一级) | 2023-08-06 12:04
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的就不能理解了,同问是啥原因

复制粘贴机器人 | 园豆:697 (小虾三级) | 2023-08-07 09:35

不知道,实际请求的时候后面路径是对的,但就是404

支持(0) 反对(0) Takagesan | 园豆:172 (初学一级) | 2023-08-08 19:26
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册