Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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: *
classi
学校の先生・生徒・保護者向けのB2B2Cの学習支援Webサービス「Classi(クラッシー)」 を開発・運営している会社です。
https://classi.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away