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

相关推荐
ᖰ・◡・ᖳ2 小时前
JavaScript:神奇的ES6之旅
前端·javascript·学习·es6
app出海创收老李2 小时前
海外独立创收日记(5)-上个月收入回顾与本月计划
前端·后端·程序员
前端Hardy2 小时前
HTML&CSS:一眼心动的 SVG 时钟
前端·javascript·css
TTGGGFF2 小时前
Streamlit:CSS——从基础到实战美化应用
前端·css
app出海创收老李2 小时前
海外独立创收日记(4)-第一笔汇款
前端·后端·程序员
Takklin2 小时前
React JSX 转换原理与 GSR 实现解析
前端·react.js
苏打水com2 小时前
字节跳动前端业务:从「短视频交互」到「全球化适配」的技术挑战
前端·音视频
又是忙碌的一天3 小时前
前端学习 JavaScript
前端·javascript·学习
Jagger_3 小时前
Cursor + Apifox MCP:告别手动复制接口,AI 助你高效完成接口文档开发
前端
IT_陈寒3 小时前
Redis性能优化:5个被低估的配置项让你的QPS提升50%
前端·人工智能·后端