本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 在 API Gateway 中設定 HTTP API 的 CORS
<a name="http-api-cors"></a>

[跨來源資源共享 (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/)。

建立 Web 應用程式來存取託管在不同網域或來源上的 API，通常需要 CORS。您可以啟用 CORS 以允許來自不同網域上託管的 Web 應用程式對 API 的請求。例如，如果您的 API 託管在 `https://{api_id}.execute-api.{region}.amazonaws.com/` 上，並且您想要從 `example.com` 上託管的 Web 應用程式呼叫 API，則您的 API 必須支援 CORS。

如果您為 API 設定 CORS，即使沒有為您的 API 設定 OPTIONS 路由，API Gateway 也會自動傳送回應給預檢 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/zh_tw/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/zh_tw/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)。

## 使用 CLI 設定 HTTP API AWS 的 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)。