vue3下的uniapp跨域踩坑

uniapp vue3 H5跨域踩坑

开发移动端H5的时候由于后端接口没有做跨域处理，因此需要做下服务器代理，于是百度搜索了uniapp下h5的跨域配置

在manifest下的h5配置proxy，大概是这样:

"h5": {
		"devServer": {
			"https": false,
			"proxy": {
				"/api": {
					"target": "服务器地址",
					"pathRewirte": {
						//路径重写
						"^/api": "/"
					}
				}
			}
		}
	}

但是配置完后，怎么都不生效，一直返回404，开始以为是没重启项目，端口占用等等一系列的问题

逐个排查后发现，配置生效了，服务器的确是代理了，但是pathRewirte的地址重写不会生效

查看uniapp文档

pathRewirte是webpack的写法，因此在vue2的项目中不存在这个问题，vue3中使用的vite需要使用函数写法重写路径，但是json不支持写函数，因此无法重写路径。

解决方案

在根路径下新建vite配置文件vite.config.js

import {
	defineConfig
} from "vite"
import uni from "@dcloudio/vite-plugin-uni";
 
export default defineConfig({
	plugins: [
		uni()
	],
	server: {
		proxy: {
			'/api': {
				target: 'http://localhost:3000',
				changeOrigin: true,
				rewrite: path => path.replace(/^\/api/, '')
			},
			
		}
	}
})

重启项目即可使用vite的配置文件进行代理。