uniapp 办理 H5 跨域问题

利用 uniapp 开辟 H5 应用时，若后端没有配置请求域名白名单则接口会出现 CORS 跨域问题，示比方下：
Access to XMLHttpRequest at 'http://www.baidu.cn/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 平台配置代理服务器：

1. "h5": {
2.                 "devServer": {
3.                         "port": 5054, // 可自行修改，不和其他项目冲突即可（修改后需重新运行项目）
4.                         "disableHostCheck": true,
5.                         "proxy": {
6.                                 // 配置代理服务器来解决跨域问题，uniapp不适用CORS方案和设置JSONP方案
7.                                 "/api/": {
8.                                         // 映射域名
9.                                         "target": "http://www.baidu.cn", // 目标接口路径
10.                                         "changeOrigin": true,
11.                                         "secure": false,
12.                                         "pathRewrite": {
13.                                                 "^/api": ""
14.                                         }
15.                                 }
16.                         }
17.                 },
18.                 "optimization": {
19.                         "treeShaking": {
20.                                 "enable": true
21.                         }
22.                 }
23.         }

复制代码

配置请求文件的baseURL

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

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

复制代码

注1：以上 request.js 文件的全局请求配置写法泉源于 uview-plus 框架的 http 请求的全局配置示例。
注2：若需示例中的源码可访问 码云 uniapp-vue3-js 项目开辟模板。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。