【最新总结】Vue或uni-app之H5跨域的总结【完全实战总结】

本文深入解析Vue或uni-app中H5跨域匹配的原理及配置方法。首先介绍如何通过替换URL中的路径实现跨域,接着讲解如何使用路径重写属性pathRewrite进一步优化跨域请求。案例丰富,适合开发者快速掌握跨域配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


        Vue或uni-app之H5跨域匹配的原理:


             第一步【正常第一步就够了】:把/api/v1中的第一个/替换成target


             如:target=http://127.0.0.1:8099 匹配结果:http://127.0.0.1:8099/api/v1
             如:target=http://127.0.0.1:8099/api2/v2 匹配结果为:http://127.0.0.1:8099/api2/v2/api/v1

        

跨域匹配结果为:http://127.0.0.1:8099/api/v1

 "proxy": {
                # 你的url路径【把第一个/替换成target目标即可,后续URI路径部分不变】
                "/api/v1": {
                    "target": "http://127.0.0.1:8099",
                    "changeOrigin": true //是否跨域,设置为true;(必须)
}


           第二步【可以省略】:跨域之后再使用路径重写属性pathRewrite【转换成跨域路径后的结果再重写】

          
             如:配置一:"^/api": "/api/v2"
                等价于http://127.0.0.1:8099/api/v1 会重写成 http://127.0.0.1:8099/api/v1/v2

第一步跨域匹配路径为:http://127.0.0.1:8099/api/v1
第二步路径重写一次变为:http://127.0.0.1:8099/api/v2/v1

"proxy": {
                "/api/v1": {
                    "target": "http://127.0.0.1:8099",
                    "changeOrigin": true //是否跨域,设置为true;(必须)

                    "pathRewrite": {
                         "^/api/": "/api/v2"
                    }
                }

完整案例: 

"h5": {
        "title": "FirstApp",
        "domain": "",
        "devServer": {
            /**
             * Vue跨域匹配的原理:
             第一步:把/api/v1中的第一个/替换成target
             如:target=http://127.0.0.1:8099 匹配结果:http://127.0.0.1:8099/api/v1
             如:target=http://127.0.0.1:8099/api2/v2 匹配结果为:http://127.0.0.1:8099/api2/v2/api/v1
             第二步:跨域之后再使用路径重写属性pathRewrite【转换成跨域路径后的结果再重写】
             如:配置一:"^/api": "/api/v2"
                等价于http://127.0.0.1:8099/api/v1 会重写成 http://127.0.0.1:8099/api/v1/v2
             **/
            "proxy": {
                "/api/v1": {
                    //你要跨域的域名(包含host、端口号,切记:一定要带上http头);
                    //同一个域名只能设置一次跨域,否则重复报错!
                    "target": "http://127.0.0.1:8099",
                    "changeOrigin": true //是否跨域,设置为true;(必须)

                    // 会把【跨域转向的路径】的/api开头的路径替换成:http://127.0.0.1:8099/api2/v2
                    // "pathRewrite": {
                    //     "^/api": "/api2/v2" // 设置/api开头路径重写成/api2/v2
                    // }
                }
            },
    }

 

### uni-app Vue3 H5 404 代理配置解决方案 在使用 `uni-app` 结合 `Vue3` 进行多端开发时,尤其是在 H5 环境下运行时,可能会遇到路由刷新后出现 404 的问题。这通常是因为服务器未正确处理前端框架的路由机制所致。 #### Nginx 配置调整 为了使 H5 路由正常工作,需对 Nginx 配置进行修改以支持前端路由的历史模式(history mode)。以下是具体的配置方案: ```nginx server { listen 80; server_name yourdomain.com; location /your-path-here { root /path/to/your/project/dist/h5; # 替换为实际项目构建后的 H5 文件路径 try_files $uri $uri/ /your-path-here/index.html; # 关键部分:将所有未匹配的请求导向 index.html index index.html index.htm; } } ``` 上述配置中的 `/your-path-here` 是指代您的 H5 应用部署的具体路径[^1]。通过设置 `try_files` 指令,可以确保即使用户直接访问某个子路径(如 `/about` `/user/profile`),Nginx 也会加载 `index.html` 页面,从而让前端路由器接管后续逻辑。 #### Vite 开发环境下的代理配置 对于基于 `Vite` 构建的 `uni-app` Vue3 项目来说,可以通过编辑 `vite.config.js` 来实现 API 请求的代理功能。具体做法如下所示: ```javascript import { defineConfig } from 'vite'; import uni from '@dcloudio/vite-plugin-uni'; export default defineConfig({ plugins: [uni()], server: { host: '0.0.0.0', port: 3000, proxy: { '/api': { target: 'https://real-api-server.com', // 替换成真实的目标接口地址 changeOrigin: true, // 是否改变源,默认true secure: false // 如果是HTTPS协议,则需要设为false忽略证书验证 }, }, }, }); ``` 以上代码片段展示了如何利用 Vite 提供的内置代理能力来解决本地调试期间可能存在的 CORS 限制问题[^4]。注意这里的 `/api` 只是一个示例前缀,您可以根据实际情况自定义。 #### 生产环境中避免 Favicon 导致的 404 错误 另外需要注意的是,在生产环境下有时会出现由于缺少默认图标 (`favicon.ico`) 所引发的额外 HTTP 请求失败情况。为了避免此类不必要的干扰,建议提前准备好合适的图标资源并放置于合适位置,比如与入口 HTML 同级目录下[^2]。 --- ### 总结 综上所述,针对 `uni-app` 使用 `Vue3` 在 H5 平台上发生的 404 报错现象,主要可以从以下几个方面入手加以改善: 1. **优化 Web Server (如 Nginx)的 URL 处理策略**; 2. **合理配置开发工具链内的反向代理规则**; 3. **补充必要的静态资产文件以防意外缺失**。 只要按照上述指导完成相应调整,基本能够有效缓解乃至彻底消除这类常见难题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值