モバイルでlocalhost APIを使用する場合に挿入される


最近単独で行われているTOYプロジェクトがあり、Frent、Backの両方が実施されているのは、久しぶりに+準備作業をしていたため、忙しいですが、早く終わらせたいという気持ちで実施されています.
モバイルネットワークを目指していたのでPCであまり気を使わずにそのまま携帯電話でコードや確認をしていましたが、ある日突然….問題が発生しました.

事件の発展


これは私が実装したAPIを通じてMongoDBに格納されたデータを画面にロードするコードで、PC上で非常によく動作していますが、モバイルデバイスではエラーはありません.
どこに問題があったのか確認しようとしても、万人デバッガconsole.log();が移動して確認できず、Reuder、Saga、APIが取り外され、あらゆる状況の数を組み合わせても絶対直す気配がないので、開発者必殺技である谷歌霊を試してみました!
しかし、10ページ目をめくっても、私のような事例はありません.公式文書を見ても、パソコンとモバイル環境で差がないので、モバイルだからといって正常に機能しないとしか書かれていません.
最後に私は泣いてStackoverflowの中に英語がない英語を全部押し出して、助けてください.

ハッピーエンド


答えが出るまでクレイジーにリフレッシュしていたら、突然「axiosの問題じゃないの?」考えたらaxiosnotworkingon mobileを検索して前文をクリックしました...

「localhostをAPIアドレスとして使用し、移動によってテストすることができますが、localhostは移動に適していません」
PCを使用してサイトに接続する場合、http://localhost:포트번호はこのように接続され、バックエンドサーバもlocalhostに設定されるため、sagaindexファイルではbaseURLをhttp://localhost:백엔드포트に設定する.
携帯電話でウェブサイトに接続する場合、http://아이피주소:포트번호という形で接続するのですが、APIアドレスも同じIPアドレスに変更するとは全く思いませんでした.
axios.defaults.baseURL = 'http://localhost:백엔드포트';
axios.defaults.baseURL = 'http://아이피주소:백엔드포트';
この行で発生した問題で、3日間ほとんどすべてのコードを分解していました.罪悪感を感じましたが、「修復できました...」笑ってみました…^^