axiosのgetでhttpsのAPIを叩くとhttpで呼ばれる

Question

###わからないこと
以下のようにaxiosのget実行時にhttpsのAPIを叩いているのにhttpで呼び出されてしまい、以下のエラーが出ます

const apiUrl = "https://hogehoge.com/api"
axios.get(apiUrl, {
      params:{
        device_number: deviceNumber //deviceNumberはuseStateで管理している値
      }
    }).then((response)=>{
      console.log(response.data)
    })

Mixed Content: The page at 'https://hogehoge.com/hoge' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://hogehoge.com/api?device_number=0'. This request has been blocked; the content must be served over HTTPS.

###試したこと
調べたところ以下のような記事があったため試してみましたが、解決には至りませんでした。
https://qiita.com/ProjectEuropa/items/db71aa5658333abf967f
解決方法等ご存知の方いらっしゃいましたら教えていただきたいです。
よろしくお願いいたします。

Comments

[mather]

疑問なのですが、https://example.com/api?device_number=0 にはクエリ文字列が付いているのに、 params.device_number を指定しているのはなぜでしょうか？

[gnuuu_07]

その点については記載ミスです。
修正いたしました。

Answer 1

APIのアクセス先がページと同じドメイン（厳密には同じオリジン）であれば、以下で良いはずです。

const apiUrl = "/api"

試してみてください。

Comments

[gnuuu_07]

試したところ、httpsでAPIが呼ばれていました！
ご回答いただきありがとうございました！