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という検索APIHTTPSをサポートしていません。


ということで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