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

相关推荐
lightgis2 分钟前
chrome中的axure插件提示无法不受支持
前端·chrome
速易达网络13 分钟前
Vue3 原生移动应用开发来了
前端·javascript·css
GISer_Jing16 分钟前
LLM对话框项目技术栈&重难点总结
前端·ai·node.js
我爱学习_zwj37 分钟前
【鸿蒙进阶-7】鸿蒙与web混合开发
前端·华为·harmonyos
小谭鸡米花37 分钟前
高德地图电子围栏/地图选区/地图打点
前端·javascript·vue.js
摆烂工程师41 分钟前
什么是 ChatGPT Business 会员?与 ChatGPT Plus 有什么不同?
前端·后端·程序员
闲不住的李先森1 小时前
使用Context7:告别AI“幻觉”,让编程助手永远生成最新、可用的代码
前端·ai编程·cursor
西瓜树枝1 小时前
解决 JS 大整数精度丢失?一文读懂 BigInt 的底层逻辑与实战规则
前端·javascript
刺客_Andy1 小时前
React 第四十六节 Router中useInRouterContext的使用详细介绍及注意事项
前端·javascript·react.js
刺客_Andy1 小时前
React 第四十四节Router中 usefetcher的使用详解及注意事项
前端·javascript·react.js