转载:解决uniapp开发h5跨域问题
原文:https://juejin.im/post/6844904063855755271
背景
最近团队内部一直在试点用uni-app
去做一些小需求,但主要是先在H5上做试点,之后再按计划编译成小程序去发布。这回分享几个遇到的小问题和解决方案。
下面说到的问题主要在用uni-app
开发H5
平台时才会遇到,非H5
平台可忽略。
跨域的问题
首先,在本地开发时,不同于直接用小程序IDE进行开发,在开发H5
平台时,需要使用浏览器进行调试,而浏览器会有跨域的问题。比如直接通过本地IP地址去访问开发中的页面,同时这个页面会调一些现有的接口时,就面临着跨域的问题。
官方的解决方案
uni-app
官方介绍了一些解决跨域问题的方法,比如服务端开启CORS,给浏览器安装跨域插件等,详见uni-app的H5版使用注意事项。但里面并没有提到(应该是很久未更新文档导致)的是,如果不想这么麻烦去解决,还有个更方便的办法,也就是用webpack-dev-server去代理即可解决。
更方便的解决方案
根据官方文档的描述,devServer
配置被要求在manifest.json
去配置,并且由于这个配置文件是json
格式的,所以只能对简单类型进行配置。但对于proxy
这项配置来说也是足够了的。直接如下方式配置即可解决:
// manifest.json { "h5": { "devServer": { "proxy": { "/prefix/api/user/list": { "target": "https://api-remote.xxxx.com", "pathRewrite": { "^/prefix": "" } } } } } }
另一种解决方案
直接创建一个vue.config.js文件,并在里面配置devServer,直接上代码
// vue.config.js module.exports = { devServer: { proxy: { '/prefix/api/user/list': { target: 'https://api-remote.xxxx.com', pathRewrite: { '^/prefix': '' } } }, } }
这种办法的好处显而易见,用js
而非json
去配置会更加的灵活,需要注意的是以上两种方案不能同时使用,第一种会覆盖第二种方案。