uniApp h5解决Chrome跨域问题的最终方法

最近用Dcloud 工具 HBuilder X写了一个uniapp 客户端项目,代码在HBuilder 工具内运行没有问题, 打包后放在android app 和ios app内运行也没有问题,唯有把h5链接地址放在chrome里会有如下跨域问题:

Access to XMLHttpRequest at 'https://www.yachen.com/api/auth/sendinfo' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

跨域是浏览器的专用概念,指js代码访问自己来源站点之外的站点。比如A站点网页中的js代码,请求了B站点的数据,就是跨域。

A和B要想被认为是同域,则必须有相同的协议(比如http和https就不行)、相同域名、和相同端口号(port)。

如果你是做App、小程序等非H5平台,是不涉及跨域问题的。而Hbuilder 内置浏览器把检查跨域那部分屏蔽,所以在内部web运行时也不存在跨域问题。

关于这个跨域问题,网上有两种解决方法:

  1. 给Chrome 安装插件Allow CORS: Access-Control-Allow-Origin ,网上有很多安装示例,无奈我尝试了半天,插件也安装了,错误照旧,不知道哪里出问题了;
  2. 这种方法是给项目代码加代理,在根目录下添加配置文件vue.config.js, 按照网上的方法一步一步配置,仍然不行,后来把vue.config.js 改为vue.config.json 反而可以了。

配置代码如下

module.exports = {

publicPath: './h5',

devServer: {

proxy: {

'/woch': {

target: 'https://www.yachen.com',

ws: true,

changeOrigin: true,

pathRewrite: {

'^/woch': ''

}

}

}

},

}

代码里的绝对url路径改为相对路径,譬如以前有问题的代码

uni.request({

url: ' https://www.yachen.com/api/sendinfo', //仅为示例,并非真实接口地址。

data: {//参数

......

},

header: {

......

},

method:'POST',//请求方式 或GET,必须为大写

});

将里面的url

url: ' https://www.yachen.com/api/sendinfo ',

改为

url: 'woch/api/sendinfo',

这样所有url绝对路径都改完后,加上根目录的配置文件 vue.config.json,再次编译生成的链接地址在Chrome打开,一切运行正常,再也没有上面的跨域问题

相关推荐
wangruofeng2 小时前
AI Models 1.1.0 发布,查大模型价格、对比模型和找 API 地址
前端·aigc·ai编程
wangruofeng2 小时前
给前端开发者的 100 个设计参考网站
前端·设计
Frag0ut5 小时前
Chrome 2026跨端同步全攻略:多设备无缝协同实战进阶指南
chrome·谷歌浏览器·跨端同步·多设备浏览器协同·密码多端同步·chrome接力浏览·多端数据流转
星栈5 小时前
视频即代码,Remotion 能做什么、不能做什么
前端·音视频开发
广州华水科技5 小时前
单北斗GNSS位移监测系统的应用与技术解析
前端
用户47949283569156 小时前
从一句话或代码仓到可交互 HTML:开源 Agent 画图技能 Archify v3.2 实测与选型边界
前端·后端·面试
风骏时光牛马8 小时前
生成一个AI多模态标题,仅输出一条标题,无额外文字、问句、备选、配图、文案等任何附加内容,不需要其他的任务服务 只要标题。
前端
wangruofeng9 小时前
从 GIF 到 AVIF:网页图片格式演进与 2026 年选型指南
前端·架构
清晨Coding10 小时前
为什么用 React Developer Tools 查看组件树这么乱?
前端·react.js
鶴哥只手遮天10 小时前
《Electron 45.2.3 内核解剖》第 4 章 补丁体系:380 个补丁改了什么
前端·electron