uniapp vue3 h5跨域调试

2024-03-29  本文已影响0人  倪大头

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

上一篇 下一篇

猜你喜欢

热点阅读