LoginSignup
5

More than 3 years have passed since last update.

Herokuでaxios実行時にhttpでAPIが呼び出されてしまう際の解決策

Last updated at Posted at 2020-07-07

結論

  • リクエストURLの末尾のスラッシュをつけない
axios.get("/api/hoge?fuga=a")

経緯

axios.get("/api/hoge/?fuga=a")

をHeroku上で実行すると

Mixed Content: The page at 'https://example.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://....js'. This request has been blocked; the content must be served over HTTPS.

がでてAPIを呼び出せない。

【Javascript】Fetch APIのFetch()で予期せぬMixed Content Errorが起きた話
によると、

「リクエストURLの末尾のスラッシュ有無でmixed contentが解消される可能性がある」

とのこと。

axios.get("/api/hoge?fuga=a")

でリクエストURLの末尾のスラッシュをつけない場合は問題なく呼び出せる
Herokuの仕様わからない

参考

【Javascript】Fetch APIのFetch()で予期せぬMixed Content Errorが起きた話

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5