15
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ElectronからCORSが有効なAPIサーバーに対してアクセスしたい

Last updated at Posted at 2019-03-16

Electron上から、外部サーバーに存在するAPIを叩く際に、サーバー側のCORSが有効になっていることから、アクセスができなかったのを解決する方法を調べたのでメモです。

CORSとは?

セキュリティ上の理由から、ブラウザーは、スクリプトによって開始されるオリジン間 HTTP リクエストを制限しています。例えば、 XMLHttpRequestや Fetch API は同一オリジンポリシーsame-origin policyに従います。つまり、これらの API を使用するウェブアプリケーションは、そのアプリケーションが読み込まれたのと同じオリジンからのみ HTTP リソースのリクエストを行うことができ、それ以外のオリジンからの場合は正しい CORS ヘッダーを含んでいることが必要です。
MDNのオリジン間リソース共有 (CORS)の項目より引用)

Electronでの解決方法

解決方法をさまよっていて、このスレッドを見つけました。それに従い、公式ドキュメントを参照してみて、以下の設定をしたところ、Electronの中でAPIとの通信用にaxiosライブラリを利用していたのですが、レスポンスを受け取ることができました。

index.js内部でElectronのウィンドウを生成するのにBrowserWindowが呼ばれていると思いますが、そのパラメータに以下を設定します。

webPreferences: {
    webSecurity: false
}

自分は社内ツールの作成にElectronを利用しているだけなので、この方法だけで解決しましたが、不特定多数のユーザーが利用するケースでElectronを使用している場合、他に考慮する必要があるものがあるかもしれません。

15
10
2

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
15
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?