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

相关推荐
咖啡の猫35 分钟前
Shell脚本-for循环应用案例
前端·chrome
百万蹄蹄向前冲3 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
2501_915918413 小时前
iOS 应用上架全流程实践,从开发内测到正式发布的多工具组合方案
android·ios·小程序·https·uni-app·iphone·webview
朝阳5813 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路4 小时前
GeoTools 读取影像元数据
前端
ssshooter4 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
Jerry5 小时前
Jetpack Compose 中的状态
前端
dae bal6 小时前
关于RSA和AES加密
前端·vue.js
柳杉6 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog6 小时前
低端设备加载webp ANR
前端·算法