uniapp解决H5跨域问题

使用 uniapp 开发 H5 应用时，若后端没有配置请求域名白名单则接口会出现 CORS 跨域问题，示例如下：

Access to XMLHttpRequest at 'http:// .baidu /api/login' from origin 'http://localhost:5054' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

此时前端可通过如下步骤配置解决此问题：

配置manifest.json文件

找到项目根目录中的 manifest.json 文件，打开该文件点击“源码视图”，在第一对 {} 中对 H5 平台配置代理服务器：

"h5": { "devServer": { "port": 5054, // 可自行修改，不和其他项目冲突即可（修改后需重新运行项目） "disableHostCheck": true, "proxy": { // 配置代理服务器来解决跨域问题，uniapp不适用CORS方案和设置JSONP方案 "/api/": { // 映射域名 "target": "http:// .baidu ", // 目标接口路径 "changeOrigin": true, "secure": false, "pathRewrite": { "^/api": "" } } } }, "optimization": { "treeShaking": { "enable": true } } } 配置请求文件的baseURL

还需要再修改项目中的全局请求的根域名，假设你的项目中全局的接口请求配置文件为 request.js 文件，示例代码如下：

// 初始化请求配置 uni.$u.http.setConfig((config) => { /* config 为默认全局配置*/ // config.baseURL 用于配置项目请求的根域名 // #ifdef H5 config.baseURL = `http://192.168.0.2:5054/`; /* H5 平台需要使用本机IPV4+端口号的本地路径 */ // #endif // #ifndef H5 config.baseURL = `http:// .baidu /`; /* 非 H5 平台则直接使用接口路径 */ // #endif // 其他配置... config.custom.toast = true // 默认消息有msg会显示出来 return config })

注1：以上 request.js 文件的全局请求配置写法来源于 uview-plus 框架的 http 请求的全局配置示例。

注2：若需示例中的源码可访问 码云 uniapp-vue3-js 项目开发模板。