# API Gateway で HTTP API の CORS を設定する
<a name="http-api-cors"></a>

[Cross-origin resource sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) は、ブラウザで実行されているスクリプトから開始される HTTP リクエストを制限するブラウザのセキュリティ機能です。API にアクセスできず、`Cross-Origin Request Blocked` を含むエラーメッセージが表示される場合は、CORS を有効にする必要がある場合があります。詳細については、「[CORS とは](https://aws.amazon.com/what-is/cross-origin-resource-sharing/)」を参照してください。

通常、CORS は、異なるドメインまたはオリジンでホストされている API にアクセスするウェブアプリケーションを構築するために必要です。CORS を有効にして、別のドメインでホストされているウェブアプリケーションから API へのリクエストを許可することができます。たとえば、API が `https://{api_id}.execute-api.{region}.amazonaws.com/` でホストされていて、`example.com` でホストされているウェブアプリケーションから API を呼び出す場合、API が CORS をサポートしている必要があります。

API に CORS を設定した場合、API Gateway は API に OPTIONS ルートが設定されていない場合でも、プリフライト OPTIONS リクエストに対するレスポンスを自動的に送信します。CORS リクエストの場合、API Gateway は設定された CORS ヘッダーを、統合からのレスポンスに追加します。

**注記**  
API の CORS を設定する場合、API Gateway はバックエンド統合から返された CORS ヘッダーを無視します。

CORS 設定では、次のパラメータを指定できます。API Gateway HTTP API コンソールを使用してこれらのパラメータを追加するには、値を入力した後に **[追加]** を選択します。


| CORS ヘッダー | CORS 設定プロパティ | 値の例 | 
| --- | --- | --- | 
|  Access-Control-Allow-Origin  |  allowOrigins  |  [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/http-api-cors.html)  | 
|  Access-Control-Allow-Credentials  |  allowCredentials  |  true  | 
|  Access-Control-Expose-Headers  |  exposeHeaders  |  date, x-api-id, \$1  | 
|  Access-Control-Max-Age  |  maxAge  |  300  | 
|  Access-Control-Allow-Methods  |  allowMethods  |  GET, POST, DELETE , \$1  | 
|  Access-Control-Allow-Headers  |  allowHeaders  |  authorization, \$1  | 

CORS ヘッダーを返すには、リクエストに `origin` ヘッダーが含まれている必要があります。`OPTIONS` メソッドの場合、リクエストには `origin` ヘッダーと `Access-Control-Request-Method` ヘッダーが含まれている必要があります。

CORS 設定は次の例のようになります。

![\[HTTP API の CORS 設定\]](http://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/images/http-cors-console.png)


## `$default` ルートおよびオーソライザーによる HTTP API の CORS の設定
<a name="http-api-cors-default-route"></a>

CORS を有効にし、 HTTP API の任意のルートに対して認可を設定できます。[`$default` ルート](https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api-develop-routes.html#http-api-develop-routes.default)の CORS および認可を有効にする場合、いくつかの特別な考慮事項があります。`$default` ルートは、`OPTIONS` リクエストを含め、明示的に定義していないすべてのメソッドとルートのリクエストをキャッチします。未認可の `OPTIONS` リクエストをサポートするには、認可を必要としない `OPTIONS /{proxy+}` ルートを API に追加し、ルートに統合をアタッチします。`OPTIONS /{proxy+}` ルートの優先順位は `$default` ルートよりも高くなります。その結果、クライアントは認可なしで API に `OPTIONS` リクエストを送信できます。ルーティングの優先順位の詳細については、「[API リクエストのルーティング](http-api-develop-routes.md#http-api-develop-routes.evaluation)」を参照してください。

## AWS CLI を使用して HTTP API の CORS を設定する
<a name="http-api-cors.example"></a>

次の [update-api](https://docs.aws.amazon.com/cli/latest/reference/apigatewayv2/update-api.html) コマンドは、`https://www.example.com` からの CORS リクエストを有効にします。

**Example**  

```
aws apigatewayv2 update-api --api-id api-id --cors-configuration AllowOrigins="https://www.example.com"
```

詳細については、Amazon API Gateway バージョン 2 API リファレンスの「[CORS](https://docs.aws.amazon.com/apigatewayv2/latest/api-reference/apis-apiid.html#apis-apiid-model-cors)」を参照してください。