1.微信開發的無奈
最近接手的系統在做微信支付,可是微信的支付授權目錄要求必須是外網域名且不支持ip地址
我了個親孃來,那好吧,直接在服務器上進行開發測試,結果微信支付太多bug,在服務器測試不方便,那咋辦呀!!!能否在本地繼續開發測試,又能按照微信支付授權目錄的規則呢?
使用Natapp等進行內網穿刺即可
2.什麼Natapp呢?
natapp 基於ngrok的反向代理軟件，通過在公網和本地運行的 Web 服務器之間建立一個安全的通道。natapp 可捕獲和分析所有通道上的流量，便於後期分析和重放.
簡單說就是通過此軟件獲取一個域名,使外網的人能通過這個域名訪問到我們的內網.
官方網站:Natapp
3.如何使用Natapp呢?
- 點擊首頁的 立即下載
- 選擇要下載的版本,我是 windows 64 位
- 下載完畢後,點擊右上角的 免費註冊 ,註冊完成後點擊 登錄 ,登錄成功需 實名認證
- 認證完成後點擊 購買隧道 -> 免費隧道 [有能力的童靴可以根據自己的條件購買] (也可參考官方文檔 https://natapp.cn/article/natapp_newbie 教程進行操作)
各種產品比較請自行查看. - 購買並創建隧道
- 點擊 我的隧道 進行查看 (此處重點記一下 authtoken)
- 打開剛下載的natapp文件夾
按shift+鼠標右鍵 在此處打開命令窗口 輸入 natapp -authtoken=Xxx Xxx爲剛纔所注意的authtoken
進入成功後顯示以下界面
Tunnel Status Online 代表鏈接成功
Version 當前客戶端版本,如果有新版本,會有提示
Forwarding 當前穿透 網址 或者端口
Web Interface 是本地Web管理界面,可在隧道配置打開或關閉,僅用於web開發測試
Total Connections 總連接數
Avg Conn Time 0.00ms 這裏不代表,不代表,不代表 延時,需要注意!
- 微信支付授權目錄配置 Forwarding 對應的網址 此處爲 http://ugsmmv.natappfree.cc
注:因爲 Forwarding 對應的網址 每次打開都會更換,所以每次都需要重新配置一下微信支付授權目錄 - 輸入 Forwarding 對應的網址即可進行訪問
- 出現的問題:對於本系統來說,因爲使用vue做的前端開發,所以配置好網址後會出現錯誤
頁面出現 Invalid Host header問題
出現問題原因：
這是由於新版的webpack-dev-server出於安全考慮，默認檢查hostname，如果hostname不是配置內的，將中斷訪問。
解決方法：
可以在build目錄中的webpack.base.config.js中添加如下webpack-dev-server配置：
找到 module.exports ={} 在其內部添加,devServer: { disableHostCheck: true, },
保存後重新啓動即可
