皆さん、こんにちは！
今回は、ちょっと自分がはまった件です。
JSでフロントを開発する際に、axiosというHTTPクライアントを使用していて以下のような問題が起こりました。
- ローカル環境：特にエラーなし。普通にPOSTリクエストを送れる。
- 開発環境サーバ：POSTリクエストを送るときに、CORSエラーが発生して送信できない。
JSエラー内容詳細
以下のようなエラーがブラウザのコンソールに出力されてました。
Mixed Content: The page at 'https://XXXXXXXX.com' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.XXXXXXXX.com'. This request has been blocked; the content must be served over HTTPS.api用に別のドメインを用意しており、こちらのバックエンド側でCORSを許可する設定になっているので、このCORSの問題は起こらないはずなのですが。。。なぜかエラーとなっています。
2-3時間ソースコードやら、インフラサイドなども調べたのですが。。とくに問題となる箇所が特定できず。
いろいろ、調べていくうちに以下の記事を発見し、解決しました。
Herokuでaxios実行時にhttpでAPIが呼び出されてしまう際の解決策 - Qiita
結論リクエストURLの末尾のスラッシュをつけないaxios.get("/api/hoge?fuga=a")経緯axios.get("/api/hoge/?fuga=a")をHeroku上で…
qiita.com
解決方法
要するに、フロントエンドからHTTPリクエストを送信する際に、エンドポイントのURLの最後に/(slash)があるときに上記のMixed Contentエラーが起きてしまうようです。
POST時のURLの最後の/をとってみると、普通にPOSTできました。
よかったよかったと。
しかし、今回も問題は単純なものでしたが。。。
なかなか気が付きませんでした。。以後フロントエンド側でのURLにも気を付けます。
ではでは。。
