[已解决]微信公众号开发如何进行本地调试

Question

业务背景

利用vue+webpack开发公众号

1. 启动的本地服务器localhost:8080进行开发调试
2. 数据是从远程urlwww.test.com进行获取
3. 在本地直接把chorme的跨域禁用后就能进行本地调试

问题描述

但是在需要调用微信相关接口的时候,必须在微信开发者工具下进行调试
但是微信开发者工具没有设置跨域的功能
所以当我用localhost:8080获取远程www.test.com接口数据时就会报错

问题出现的环境背景及自己尝试过哪些方法

1. 尝试下载qq浏览器里面说是有一个微信调试工具,但是没找到
2. 本机设置hosts映射,但始终映射失败

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

如何不用将前端代码上传到远程服务器,也能够在本地进行远程调试?

解决

• 右击开发者工具快捷方式 -> 点击属性
• 点击快捷方式 -> 点击目标
• --args --disable-web-security --user-data-dir 将这行代码粘贴到路径后面
• 重新打开开发者工具,跨域问题就没有了

Answer 1

微信开发者工具可以像chomre一样设置跨域

Answer 2

举例：

1. 将微信相关域名配置为home.example.com
2. DNS解析服务商中将域名解析到本机IP（如果是内网需要做端口映射）或设置hosts home.example.com 127.0.0.1
3. vue-cli中设置0.0.0.0:80端口进行调试
4. 微信开发者工具使用home.example.com访问本地dev