UNIAPP项目如何在HBuilder中设置跨域请求代理（uni.request）

遇到问题

今天在一个项目中，遇到了个很常见的前端跨域问题，这个项目是uniapp项目，没有vue.config.js。 于是上百度找资料，找到的都是类似这样的

"devServer" : {
       "proxy" :{
       		"/api" :{
				"target":"http://localhost:3000"
			}
	   }
 }

可我这里比较特殊，请求本身就带了 “http://localhost：端口号” 这一段字符串。

然后翻阅我本地以前的项目，得到了启示，最终解决了问题。

解决方法

详细操作如下

使用HBuilder打开UNIAPP项目

找到manifest.json文件，双击打开

在右侧界面中的左侧功能列表里面找到源码视图

双击打开，可以进行源码编辑

找到JSON格式的“h5”节点

再找到"h5"节点下的“devServer”节点

编辑内容如下

 "devServer" : {
            "https" : false,
			"port": 8000,
			"disableHostCheck":true,
			"proxy" :{
				"/api":{
					"target":"http://localhost:3000",
					"changeOrigin":true,
					"secure":false,
					"ws": true,
					"pathRewrite": {
					  "^/api": "/api"
					}
				}
			}
        }

这里稍微解释一下：

port:8000 是要与本地前端程序启用的端口一致

"target":"http://localhost:3000" 这里的请求地址与后端请求地址一致

"^/api": "/api" 这部分是核心，把/api以及前面的所有字符，完全替换为/api

其他参数请大家自行查找相关资料，这里就不一一细说了。

经过处理后，请求的最终形式变成了 "http://localhost:3000/api/" + 接口路径

这样就正确访问到后端接口了。

问题解决完毕