CORSとは

CORSとは

CORSは「Cross-Origin Resource Sharing（クロス・オリジン・リソース・シェアリング）」の略称で、「コーズ」と読みます。
CORSは、あるオリジン（ドメイン、プロトコル、ポート）で動作しているウェブアプリケーションに、異なるオリジンにあるリソースへのアクセス権限を与える仕組みです。
通常、ブラウザでは同一オリジンポリシー（Same-Origin Policy）により、異なるオリジン間でのリソース共有が制限されています。
しかし、CORSを使用することで、この制限を緩和し、他のオリジンからのリソース共有を可能にします。
例えば、https://example.com で動作しているウェブアプリケーションが、https://api.example.com にあるAPIリソースにアクセスしたい場合、CORSの設定がないとブラウザがアクセスをブロックします。
しかし、サーバー側で適切なCORS設定を行うことで、ブラウザは異なるオリジン間でのリソース共有を許可します。
CORSは、現代のウェブ開発において非常に重要な概念であり、異なるドメイン間でのデータのやり取りを安全かつ柔軟に行うことができます。

オリジンって何？

CORSについて、「異なるオリジン間でのリソース共有」と言われても、オリジンとは一体何なのでしょうか。
オリジンは、以下の3つの要素で決まります。

1. スキーム（httpやhttpsなどのプロトコル）
2. ホスト（ドメイン名）
3. ポート番号

同じオリジンであると言えるのは、これら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を呼び出す場合の代表的な対処法を以下で説明します。

1. CORSの設定をサーバー側で行う
   サーバー側でCORSの設定を行うことで、指定したオリジンからのリクエストを許可することができます。
   これにより、指定したオリジンからのリクエストがCORSの制限なしで実行できるようになります。

2. プロキシサーバーを使用する
   ブラウザとkintoneの間にプロキシサーバーを設置し、APIリクエストをプロキシサーバー経由で送信します。
   プロキシサーバーは、ブラウザと同じオリジンで動作するため、CORSの制限を受けません。
   プロキシサーバーがリクエストを転送し、レスポンスをブラウザに返します。
   ただし、この方法は追加のサーバーが必要であり、設定や管理の手間がかかります。

3. 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