uniapp vue3 h5跨域调试

h5项目本地调试跨域，vue3在manifest.json里配置devServer转发是不生效的，vue3项目是用vite编译的，需要在项目根目录创建vite.config.js

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
    plugins: [uni()],
    server: {
      proxy: {
        "/prefix": {
          target: "https://juejin.cn/", // 目标接口地址
          changeOrigin: true,
          rewrite: path => path.replace(/^\/prefix/, '')
        }
      }
    }
})

使用：

// 直连
function directRequest() {
    uni.request({
        url: 'https://juejin.cn/post/6844904063855755271'
    })
}

// 转发
function proxyRequest() {
    uni.request({
        url: '/prefix/post/6844904063855755271'
    })
}

这样就会把prefix开头的地址转为目标地址https://juejin.cn/

效果：

image.png

也可以直接用谷歌浏览器插件，插件地址：
https://chromewebstore.google.com/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf