Mixed Content(混合コンテンツ)エラー
ユーザ情報登録ページで、
郵便番号入力→「住所を取得」ボタンクリック→住所欄に取得したデータを表示
を実装しました。
data() { return { userData : { zip_code: '', address1: '', address2: '' }, error_msg: '' } }, methods: { getZipCodeApi(){ this.error_msg = '' axios.get('http://zipcloud.ibsnet.co.jp/api/search',{ params: { zipcode: this.userData.zip_code } }).then(res => { if(res.data.status == 200){ console.log(res) this.userData.address1 = res.data.results[0].address1 + res.data.results[0].address2 this.userData.address2 = res.data.results[0].address3 }else{ this.error_msg = '取得に失敗しました' } }) } }
メソッド実行時にエラーメッセージを初期化。
郵便番号検索APIを、入力したzip_codeをparamsとして含めてaxios.getし、status200で返ってきたらレスポンスのJSONからデータを取得。失敗してたらエラーメッセージをセット。
動きはOKなんですが、以下のようなエラーが出ました。
xhr.js:178 Mixed Content: The page at 'https://---------------------' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=0000000'. This request has been blocked; the content must be served over HTTPS.
HTTPS接続中のHTMLから、HTTP接続が発生した時に出るエラー、というか警告のようです。
「HTTP接続しちゃったら危ないじゃんお前よ、せっかく俺が守ってやってんのに……」というメッセージです。
axios.get('//zipcloud.ibsnet.co.jp/api/search'
このようにプロトコル部分を削除して記述しても、外部サイトの場合はHTTPS接続であればそのままHTTPS接続されるようです。
そしてzipcloudという検索APIはHTTPSをサポートしていません。
ということでHTTPS接続をサポートしている「郵便番号-住所検索API」へ乗り換え、以下のようになりました。
getZipCodeApi(){ this.error_msg = "" this.userData.address1 = "" this.userData.address2 = "" axios.get('https://api.zipaddress.net/',{ params: { zipcode: this.userData.zip_code } }).then(res => { console.log(res.data.pref) if(res.data.code === 200){ console.log(res) this.userData.address1 = res.data.data.pref + res.data.data.city this.userData.address2 = res.data.data.town }else{ this.error_msg = "取得に失敗しました" } }) },
参考リンク
郵便番号-住所検索API
混合コンテンツとは | Web | Google Developers