UniApp多端开发H5跨域问题报错解决

文章介绍了在开发UniApp时遇到的跨域问题,特别是在H5端请求数据接口失败的情况。提供了解决方案,包括使用UniApp内置浏览器和在配置文件中设置代理。通过在devServer配置代理,可以解决跨域问题,同时给出了axios请求中的条件编译处理。

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

uniapp在开发时碰到小程序端可以正常请求数据接口,而运行在H5端时报错无法访问到接口,报错如下:

 以上报错信息提示数据与服务器不同源,浏览器的同源策略下就会报这样的错误,即跨域问题,解决这个报错主要两个方法,亲测有效!!!!

方法一: 使用UniApp的内置浏览器运行项目,能够解决这个问题,但是需要安装内置浏览器此插件,方法简单。

 方法二:在配置文件文件中设置代理解决跨问题

 在源码视图中找到H5配置项如下配置(数据为JSON格式):

   "h5" : {
        "devServer" : {
            "disableHostCheck" : true,
            "proxy" : {
                "/api" : {
                    "target" : "https://linggong.74cms.com",//数据请求的接口网址
                    "changeOrigin" : true,//是否开启跨域
                    "pathRewrite" : {
                        "^/api" : "" 
                    }
                }
            }
        },
}

 完成后在axios数据请求中写条件编译:

 以上步骤基本可以解决问题:

 Ok!请求成功!!!

如有不足或者更好的方法请指正交流!

参考文章网址:https://juejin.cn/post/7122655997994205197

### 解决 UniApp 中 Canvas `addEventListener` 方法报错UniApp 开发过程中遇到 canvas 使用 `addEventListener` 报错的情况,通常是因为不同平台对于 DOM API 支持程度有所差异。具体来说,在某些平台上可能并不完全支持标准浏览器环境下的事件监听器机制。 为了确保兼容性和稳定性,建议采用如下几种方式来解决问题: #### 方案一:使用内置方法替代 UniApp 提供了一系列针对 canvas 组件优化的方法,可以直接通过这些接口实现所需功能而无需依赖原生的 `addEventListener` 函数。例如可以利用 `bindtouchstart`, `bindtap` 等属性绑定触摸或点击事件[^1]。 ```html <canvas type="2d" id="myCanvas" bindtouchstart="handleTouchStart"></canvas> ``` #### 方案二:判断当前运行环境并适配 如果确实需要使用 `addEventListener` 或其他特定于 Web 平台的功能,则可以在代码中加入条件判断语句,仅当处于 H5 模式下才执行相应操作。这样既能保留原有逻辑又不会影响其它端的表现。 ```javascript if (process.env.VUE_APP_PLATFORM === 'h5') { const ctx = document.getElementById('myCanvas').getContext('2d'); ctx.canvas.addEventListener('click', function(event){ console.log('Clicked on canvas!'); }); } ``` 需要注意的是,上述代码片段中的 `process.env.VUE_APP_PLATFORM` 是用于区分构建目标平台的一个变量;实际项目里可以根据具体情况调整检测逻辑[^4]。 #### 方案三:考虑资源加载问题 有时 canvas 加载外部图像时可能会因为同源策略限制而导致无法正常工作。此时应确认所使用的图片资源是否来自合法名,并设置合适的 CORS 头信息以允许请求。 ```python # 服务端配置CORS响应头示例(Python Flask框架) from flask import make_response, send_file @app.route('/image') def get_image(): response = make_response(send_file('path/to/image')) response.headers['Access-Control-Allow-Origin'] = '*' return response ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值