CORSとは
CORSは「Cross-Origin Resource Sharing（クロス・オリジン・リソース・シェアリング）」の略称で、「コーズ」と読みます。
CORSは、あるオリジン（ドメイン、プロトコル、ポート）で動作しているウェブアプリケーションに、異なるオリジンにあるリソースへのアクセス権限を与える仕組みです。
通常、ブラウザでは同一オリジンポリシー（Same-Origin Policy）により、異なるオリジン間でのリソース共有が制限されています。
しかし、CORSを使用することで、この制限を緩和し、他のオリジンからのリソース共有を可能にします。
例えば、https://example.com で動作しているウェブアプリケーションが、https://api.example.com にあるAPIリソースにアクセスしたい場合、CORSの設定がないとブラウザがアクセスをブロックします。
しかし、サーバー側で適切なCORS設定を行うことで、ブラウザは異なるオリジン間でのリソース共有を許可します。
CORSは、現代のウェブ開発において非常に重要な概念であり、異なるドメイン間でのデータのやり取りを安全かつ柔軟に行うことができます。
オリジンって何？
CORSについて、「異なるオリジン間でのリソース共有」と言われても、オリジンとは一体何なのでしょうか。
オリジンは、以下の3つの要素で決まります。
- スキーム（httpやhttpsなどのプロトコル）
- ホスト（ドメイン名）
- ポート番号
同じオリジンであると言えるのは、これら3つの要素がすべて一致した場合のみです。
例えば、以下のURLは同一オリジンです。
- http://example.com/
- http://example.com/page1.html
- http://example.com/directory/page2.html
一方、次のURLは異なるオリジンです。
- https://example.com/（スキームが異なる）
- http://subdomain.example.com/（ホストが異なる）
- http://example.com:8080/（ポート番号が異なる）
ブラウザには、セキュリティ上の理由から、同一オリジンポリシーという仕組みが実装されています。
これは、あるオリジンのページから、別のオリジンのリソースへのアクセスを制限するものです。
しかし、現代のWebアプリケーションでは、異なるオリジン間でのリソース共有が必要な場合があります。
そこで登場するのがCORSです。
CORSを使うことで、サーバーが明示的に許可した場合に限り、ブラウザは異なるオリジンのリソースへのアクセスを許可します。
つまり、CORSは同一オリジンポリシーの例外を設けるための仕組みと言えます。
これにより、異なるオリジン間でのリソース共有が安全に行えるようになります。
ブラウザから直接APIを呼び出す場合
ブラウザから直接APIを呼び出す場合の代表的な対処法を以下で説明します。
- CORSの設定をサーバー側で行う
サーバー側でCORSの設定を行うことで、指定したオリジンからのリクエストを許可することができます。
これにより、指定したオリジンからのリクエストがCORSの制限なしで実行できるようになります。 - プロキシサーバーを使用する
ブラウザとkintoneの間にプロキシサーバーを設置し、APIリクエストをプロキシサーバー経由で送信します。
プロキシサーバーは、ブラウザと同じオリジンで動作するため、CORSの制限を受けません。
プロキシサーバーがリクエストを転送し、レスポンスをブラウザに返します。
ただし、この方法は追加のサーバーが必要であり、設定や管理の手間がかかります。 - OAuth 2.0を使用する
OAuth 2.0は、認証と認可のためのプロトコルです。
OAuth 2.0の認証フローを実装し、アクセストークンを取得します。
取得したアクセストークンを使用してAPIリクエストを送信すると、CORSエラーが発生しません。
これらの対処法は、それぞれ長所と短所があります。
プロジェクトの要件や環境に応じて、最適な方法を選択する必要があります。
一般的には、サーバー側でCORSの設定を行う方法が最も推奨されています。
プロキシサーバーを使用してCORSエラーを回避する場合、追加のサーバーが必要となり、設定や管理の手間がかかります。
コラボフローの申請画面（ブラウザ）から、外部のAPIを呼び出す場合
コラボフローJavaScript APIでは、クロスドメインの制限を回避して、外部WebサイトのREST APIを呼び出すための関数が用意されています。
この関数を利用すると、クライアント側から外部のAPIを直接呼び出すのではなく、コラボフローのサーバーを経由してAPIリクエストを送信します。
これにより、CORSの制限を受けずに外部のAPIにアクセスできます。
外部のAPIを実行する：https://collaboflow.zendesk.com/hc/ja/articles/360000262876
