quasar 开发中的跨域问题

最近在用 vue 三件套 + quasar 开发 hybrid app,遇到了一个跨域问题,简单记录一下。

用 H5 开发手机应用的一种自然选择就是 server-less 啰,就是把所有的 HTML/CSS/JS 文件作为资源文件打包到最终的应用包中,开个 WebView 直接加载本地文件就好了。这样跑起来的 JS 代码本身并不是运行在哪个 web 服务器环境中的,自然也就可以随便访问其他域名下的网络资源啰。

然而用 vue(quasar) 默认模板生成的工程在编译的时候(npm run build)会提示:

Built files are meant to be served over an HTTP server.

Opening index.html over file:// won't work.

意思就是:虽然这是个 server-less 应用,但你要么在手机上用 cordova 来跑(quasar),要么在主机上就放在一个 web server 里面跑,我们是不支持直接用浏览器打开编译好的 index.html 文件来访问哟。

不过它说是这么说,实际行不行还是要实测一下的。大概试了下,vue 应用是可以直接打开文件跑的,简单点点也没啥问题,不知道会不会有啥高级操作会有坑;quasar 直接打开就是一片空白了,简单搜了下是启动时的一个 cordova 环境检测条件通不过,然而去掉这个检测之后依然空白,后面也就懒得深究了。

嘛,这个限制倒也可以理解啦,毕竟我们开发的本质上也就是个 web 应用,并且放在 web server 上跑还能热更新啥的。vue(quasar) 应用比较方便的开发姿势就是 npm run dev 啰,可以自动检测文件变动然后自动刷新啥的,开个 chrome 然后把开发者工具开在右边就可以愉快地模拟出手机坚屏效果搞搞搞了,不需要每次改个啥都费力八唆地编译部署到手机或者模拟器上弄了。

quasar in chrome

然而在用 axios 访问我们的 REST 服务时,浏览器就不干了,并不认人返回回来的正经应答:

Failed to load http://xxx.xxx:11001/yyy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

天真的我第一时间就去搜 Access-Control-Allow-Origin 的解决方案啦,毕竟以前刚好看到过 CORS 这个名词来着,然后就开始折腾我们的测试服务器了。spring boot 本身加 CORS 支持还是挺简单的,然而加上之后,应答的默认编码却莫名地变成了 latin-1;改了全局的默认应答编码,则又会出现其他问题,搞得我头大不已 😂

终于,在某一次神奇的洗澡时间里,我忽然就想通了,这明明就是浏览器不认那个应答而已,又不是应答本身有啥问题,那我关了浏览器的这个检查不就好了嘛 😂 反正也只是在开发时会有这个问题而已,正常(手机)使用又没事,怎么能这样就对服务端乱搞不是 😂

于是赶紧上网搜了搜,发现 firefox 想关这个还有点儿麻烦,而 chrome 就简单多了,启动时加个参数 --disable-web-security 即可;然而这个是全局的,为了不影响正常使用,我又去单搞了个 portable chrome 用来专职开发。

完美

(原来我还挺啰嗦的,小时候有这种凑字数能力多好 😂

 
comments powered by Disqus