HTTPS裡的Ajax , 總是用 HTTP 去取得資料
最近在用 vue 的 vue-router 玩單一頁面應用(SPA), 在開發環境裡都還算順利, 就順順的把弄好的東西丟上網站去, 結果一直遇到跨來源資源共用 (CORS) 問題而無法取得資料, 因為線上的是 https 連線的, 但網頁裡的非同步應用卻都是用 http 來連線.
在網路上找相關問題的解答大部分是強制使用 https 去連線, 但這問題在 PHP 還好做, 在 Vue 或是 axios 裡我就是新手了, 也依建議去做強制設定, 但還是一直在 https 的環境裡去連 http 的連線.
程式解決不了, 我就改由系統去看, 結果發現我設了 HTTPS 的獨立 Log 居然都沒有任何連線記錄, 然後再查看 PHP 的 $_SEVER 變數, SERVER_PORT 居然是 80, 那為什麼我的 HTTPS 可以連線呢? 唯一可以在 PHP 找到 HTTPS 相關的只有 HTTP_X_FORWARDED_PROTO 是 HTTPS, 所以看起來是有別的技術問題, 但最近DNS跟網站空間都搬家, 到底是哪裡有問題也不清楚, 只能一個個找起.
中間過程實在有點累也有點笨就不提了...
直到今天我查了一下 HTTPS 的 SSL 資訊, 怎麼不是我去註冊的免費SSL, 而是 Cloudflare 申請的, 所以就去 Cloudflare 網站查我的網域狀態, 看到了一個設定. 在網域名稱下有個 SSL 的項目, 我設了 Flexible, 就是這個設定 Cloudflare 會幫你把網站加上 https 時也能順利連線, 只是他的低層自動用 http 去抓資料, 這真的是一個很佛心的設計, 讓你不用多花錢也可以有 https 的連線, 但對 Ajax 的應用來說就苦囉.
SSL 的設定有四個選項
- Off
- Flexible
- Full
- Full (Strict)
如果你有有效的第三方的 SSL 憑證的話, 那就要選 Full (Strict), 這樣才會有真的 https 連線到網站去. 如果是自己建立的SSL 憑證, 那就選 Full. 如果都沒有但也想用 https , 那就選 Flexible , 但網站上要避免使用 ajax