React.jsでSPAアプリを開発する際、アプリから外部APIを叩いて、うまくいかず、以下のようなエラーが表示され、丸2日ほど、時間を潰してしまったので、メモがてらQiitaに記載
Error: Network Error
上記のエラーが表示されて、APIのリクエストに失敗する場合、API側に、CORS対策が行われていないことが理由の可能性が高いです。
自分の管理しているAPIでなければ、対策のしようがないですが、自分の管理している開発サーバーや、ローカルで立てているサーバーの場合の簡易的な回避方法です。(あくまで暫定対応なので、本番サーバーには、適用しないように)
開発サーバーやローカルのサーバーで、以下のように、設定する
Access-Control-Allow-Origin ヘッダを使用し、許可するクライアント側の生成元(オリジン)を指定
htaccessに、特定のサイトのみ許可
.htaccess
Access-Control-Allow-Origin: "http://hogehoge.com:8080"
複数指定したい場合、空白で区切る
.htaccess
Access-Control-Allow-Origin: "http://hogehoge_a.com http://hogehoge_b.com"
すべてのオリジンを許可したい場合、『 * 』を指定します。
.htaccess
Access-Control-Allow-Origin: *