LoginSignup
0
1

More than 5 years have passed since last update.

ReactなどのSPAアプリから外部APIを叩く際の「Error: Network Error」(CORSの暫定対策)

Last updated at Posted at 2018-07-21

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: *
0
1
0

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
0
1