首先,在本地开发时,不同于直接用小程序IDE进行开发,在开发H5平台时,需要使用浏览器进行调试,而浏览器会有跨域的问题。比如直接通过本地IP地址去访问开发中的页面,同时这个页面会调一些现有的接口时,就面临着跨域的问题。
根据官方文档的描述,devServer配置被要求在manifest.json去配置,并且由于这个配置文件是json格式的,所以只能对简单类型进行配置。但对于proxy这项配置来说也是足够了的。直接如下方式配置即可解决:
// manifest.json
{
"h5": {
"devServer": {
"proxy": {
"/api": {
"target": "https://www.xxxx.com",
"pathRewrite": {
"^/api": ""
}
}
}
}
}
}
直接在根目录创建一个vue.config.js文件,并在里面配置devServer,直接上代码
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://www.xxxx.com',
pathRewrite: {
'^/api': ''
}
}
},
}
}
这种办法的好处显而易见,用js而非json去配置会更加的灵活,需要注意的是以上两种方案不能同时使用,第一种会覆盖第二种方案,配置完成后记得重启服务。
请求示例
uni.request({
url: '/api/publicuser/login',
method: 'POST',
success: (res) => {
console.log(res)
},
fail: (err) => {
}
})