UniApp 中 Web/H5 正确使用反向代理解决跨域问题

因为 Vue3 的构建工具是 Vite ,所以配置 vue.config.js 是没用的(Vue2 因为使用 webpack 所以才用这个文件)

这里提供一份 vue.config.js 的示例:

js 复制代码
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://example.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/',
                },
            }
        }
    }
}

同时 manifest.json 里配置的反代配置似乎有 Bug,反代能生效,但 path 重写是失效的,即:

json 复制代码
{
    "h5": {
        "devServer": {
            "https": false,
            "disableHostCheck": true,
            "proxy": {
                "/api": {
                    "target": "http://example.com",
                    "pathRewrite": {
                        "^/api": ""
                    }
                }
            }
        }
    }
}

因为使用了 Vite,所以我们应该创建 vite.config.js 文件进行设置:

js 复制代码
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
    plugins: [
        uni()
    ],
    server: {
        host: '127.0.0.1',
        port: 5173,
        proxy: {
            '/api': {
                target: 'http://example.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, ''), // 此处进行路径重写
            }
        }
    }
});

至此重新运行服务即可看到生效并成功的反向代理,更多关于 Vite 反代配置看这里:https://cn.vitejs.dev/config/server-options#server-proxy

相关推荐
脑袋大大的5 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0115 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin1 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui