當網站服務經過「Cloudflare Proxy 處理」時，網頁上放的 Line 『加入好友』按鈕無法顯示

line social api cloudflare proxy 網頁程式 webpage facebook like

rayyen 2022-01-19 15:32:36 ‧ 2508 瀏覽

分享至

我們的網站服務有設定經過 Cloudflare Proxy 處理。最近需要在網頁上放置 LINE 加好友/分享（依據此文件）、Facebook 讚/分享（依據此文件）等按鈕。

在本機端（localhost）顯示與功能全都正常，後來放上正式環境後發現 LINE 的按鈕居然不見了，只剩下 Facebook 的按鈕。後來發現一個直接相關的原因是在 Cloudflare 中若設定網址「通過 Proxy 處理」就會造成 LINE 按鈕消失，若設定「僅 DNS」（就是不透過PROXY處理）LINE 按鈕就會出現了。請參考下圖：

因為我們目前還不打算為了這個按鈕去把 Cloudflare Proxy 關掉，所以想請教各位前輩是否能夠指導一下如何解決？我知道這可能有點偏門，但仍請不吝賜教，感謝！！

備註：
完整交代一下小細節，Cloudflare 修改後需要等個幾分鐘後，關掉瀏覽器重開進到同個網頁才會看到變化。

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2022-01-19 17:25:10 檢舉

補充一下。使用 Cloudflare 的CDN，也就是你看到的proxy
其實它是有緩存的。
使用其第一個選項。其右上方有可以先開啟「開發模式」
會先暫時不緩存一段時間。(過一段時間會自動關閉往發模式)

如果剛好正在開發處理。可以先打開它。
也有一個全部清除的動作也可以用。

不過全部清除有時清除完還是要等幾分。
一般我都是先打開開發模式。全測試好後，就會再將其全部清除。
不需要去動其PROXY的設定。

rayyen iT邦新手 5 級 ‧ 2022-01-20 09:43:25 檢舉

感謝您的提醒，我沒注意過有這個「開發模式」可以用，今天學到了！謝謝～
不過我主要的問題確定跟緩存無關，還希望有先進能指導一下，感激不盡啊！！

rayyen iT邦新手 5 級 ‧ 2022-01-25 12:25:05 檢舉

我在 StackOverflow 有問到一個點，在此分享一下。
就是更明確的原因出在 Rocket Loader。我試過確實若把 proxy 打開，但是 Rocket Loader 關掉，按鈕會正常出現。所以現在問題變成把 Rocket Loader 關掉對於網站的呈現速度影響是否很大（雖然我測試還好，但不知道如果比較多人同時使用會如何）？以及是否有辦法避免 Rocket Loader 跟 LINE 按鈕之間的衝突？

登入發表討論