什么是跨域訪問

瀏覽器出于安全性考慮，會限制從頁面腳本內發起的跨域訪問（CORS）請求，此時頁面只能訪問同源的資源，而CORS允許瀏覽器向跨域服務器，發送XMLHttpRequest請求，從而實現跨域訪問。

圖 跨域訪問

瀏覽器將CORS請求分為兩類：

• 簡單請求

簡單跨域請求的場景需要滿足以下兩個條件：

a. 請求方法是HEAD，GET，或者POST。

b. HTTP的頭信息不超出以下范圍：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：取值范圍：application/x-www-form-urlencoded、multipart/form-data、text/plain

對于簡單請求，瀏覽器自動在頭信息之中，添加一個Origin字段，Origin字段用于說明本次請求來自哪個源（協議+域名+端口）。服務器根據這個值，決定是否同意這次請求。服務器響應消息中包含“Access-Control-Allow-Origin”時，表示同意請求。

• 非簡單請求

不滿足簡單請求兩個條件的都為非簡單請求。

對于非簡單請求，在正式通信之前，瀏覽器會增加一次HTTP查詢請求，稱為預檢請求。瀏覽器詢問服務器，當前頁面所在的源是否在服務器的許可名單之中，以及可以使用哪些HTTP請求方法和頭信息字段。預檢通過后，瀏覽器向服務器發送簡單請求。

開啟跨域訪問

API網關默認不開啟跨域訪問，如果您需要開啟，請參考以下說明完成跨域配置。如需自定義跨域的請求頭、跨域的請求方法和指定授權訪問的域，請使用跨域資源共享策略說明。

• 簡單跨域訪問

如果是創建新的API，在“安全配置”時，勾選“開啟支持跨域（CORS）”開關。詳細的使用指導，可參考簡單請求。

• 非簡單請求的跨域訪問

注意
非簡單請求的跨域訪問需要在API的分組中創建一個“請求方法”為“OPTIONS”的API，作為預檢請求。

預檢請求API的參數設置，請參考以下說明填寫。詳細的使用指導可參考非簡單請求。

a. 在“前端定義”中，參數填寫說明如下：

• 請求方法：選擇“OPTIONS”

• 請求協議：選擇與已開啟CORS的API相同的請求協議

• 請求Path：填斜杠/

  

b. 在“安全配置”中，安全認證選“無認證”，勾選“開啟支持跨域CORS”。

c. 后端服務選擇Mock

簡單請求

對于簡單請求，您需要開啟簡單跨域訪問。

場景一：已開啟CORS，且后端服務響應消息中未指定跨域頭時，API網關接受任意域的請求，并返回“Access-Control-Allow-Origin”跨域頭，示例如下：

瀏覽器發送一個帶Origin字段的請求消息：

GET /simple HTTP/1.1
Host: www.test.com
Orgin: //www.cors.com
Content-Type: application/x-www-form-urlencoded; charset=utf-8
Accept: application/json
Date: Tue, 15 Jan 2019 01:25:52 GMT

Origin：此字段必選，表示請求消息所屬源，上例中請求來源于“//www.cors.com”，API網關/后端服務根據這個值，決定是否同意本次請求。

后端服務返回響應消息：

HTTP/1.1 200 OK
Date: Tue, 15 Jan 2019 01:25:52 GMT
Content-Type: application/json
Content-Length: 16
Server: api-gateway

{"status":"200"}

API網關響應消息：

HTTP/1.1 200 OK
Date: Tue, 15 Jan 2019 01:25:52 GMT
Content-Type: application/json
Content-Length: 16
Server: api-gateway
X-Request-Id: 454d689fa69847610b3ca486458fb08b
Access-Control-Allow-Origin: *

{"status":"200"}

Access-Control-Allow-Origin：此字段必選，“*”表示API網關接受任意域的請求。

場景二：已開啟CORS，且后端服務響應消息中指定跨域頭時，后端服務響應的跨域頭將覆蓋API網關增加的跨域頭，示例如下：

瀏覽器發送一個帶Origin字段的請求消息：

GET /simple HTTP/1.1
Host: www.test.com
Orgin: //www.cors.com
Content-Type: application/x-www-form-urlencoded; charset=utf-8
Accept: application/json
Date: Tue, 15 Jan 2019 01:25:52 GMT

Origin：此字段必選，表示請求消息所屬源，上例中請求來源于“//www.cors.com”，API網關/后端服務根據這個值，決定是否同意本次請求。

后端服務返回響應消息：

HTTP/1.1 200 OK
Date: Tue, 15 Jan 2019 01:25:52 GMT
Content-Type: application/json
Content-Length: 16
Server: api-gateway
Access-Control-Allow-Origin: //www.cors.com

{"status":"200"}

Access-Control-Allow-Origin：表示后端服務接受“//www.cors.com”的請求。

API網關響應消息：

HTTP/1.1 200 OK
Date: Tue, 15 Jan 2019 01:25:52 GMT
Content-Type: application/json
Content-Length: 16
Server: api-gateway
X-Request-Id: 454d689fa69847610b3ca486458fb08b
Access-Control-Allow-Origin: //www.cors.com

{"status":"200"}

后端服務響應消息中的跨域頭覆蓋API網關響應消息中的跨域頭。

非簡單請求

對于非簡單請求，您需要開啟跨域訪問，并且創建一個“請求方法”為“OPTIONS”的API。

“請求方法”為“OPTIONS”的API和普通API的區別如下：

• 所屬分組：選擇已開啟CORS的API所在的分組。
• 請求方法：選擇“OPTIONS”。
• 請求協議：選擇與已開啟CORS的API相同的請求協議。
• 請求Path：填斜杠/即可，也可選擇與已開啟CORS的API相同或者匹配的請求Path。
• 安全認證：可選擇“無認證”。無論選擇哪種認證方式，API網關都按照無認證處理。
• 支持跨域CORS：選擇開啟CORS。

假設后端服務類型為Mock，示例如下：

瀏覽器發送“Method”為“OPTIONS”的API請求：

OPTIONS /HTTP/1.1
User-Agent: curl/7.29.0
Host: localhost
Accept: */*
Origin: //www.cors.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Sdk-Date

• Origin：此字段必選，表示請求消息所屬源。
• Access-Control-Request-Method：此字段必選，表示請求會使用哪些HTTP請求方法。
• Access-Control-Request-Headers：此字段可選，表示請求會額外發送的頭信息字段。

后端服務返回消息： 無

API網關返回消息：

HTTP/1.1 200 OK
Date: Tue, 15 Jan 2019 02:38:48 GMT
Content-Type: application/json
Content-Length: 1036
Server: api-gateway
X-Request-Id: c9b8926888c356d6a9581c5c10bb4d11
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-Stage,X-Sdk-Date,X-Sdk-Nonce,X-Proxy-Signed-Headers,X-Sdk-Content-Sha256,X-Forwarded-For,Authorization,Content-Type,Accept,Accept-Ranges,Cache-Control,Range
Access-Control-Expose-Headers: X-Request-Id,X-Apig-Latency,X-Apig-Upstream-Latency,X-Apig-RateLimit-Api,X-Apig-RateLimit-User,X-Apig-RateLimit-App,X-Apig-RateLimit-Ip,X-Apig-RateLimit-Api-Allenv
Access-Control-Allow-Methods: GET,POST,PUT,DELETE,HEAD,OPTIONS,PATCH
Access-Control-Max-Age: 172800

• Access-Control-Allow-Origin：此字段必選，“*”表示API網關接受任意域的請求。
• Access-Control-Allow-Headers：當請求消息中包含此字段時，此字段必選。表示允許跨域的所有請求頭信息字段。
• Access-Control-Expose-Headers：表示跨域訪問允許查看的返回頭信息字段。
• Access-Control-Allow-Methods：此字段必選，表示API網關支持的所有HTTP請求方法。
• Access-Control-Max-Age：此字段可選，表示本次預檢的有效期，單位：秒。在有效期內，無需再次發出預檢請求。

瀏覽器發送一個帶Origin字段的請求頭：

PUT /simple HTTP/1.1
Host: www.test.com
Orgin: //www.cors.com
Content-Type: application/x-www-form-urlencoded; charset=utf-8
Accept: application/json
Date: Tue, 15 Jan 2019 01:25:52 GMT

后端服務返回消息：

HTTP/1.1 200 OK
Date: Tue, 15 Jan 2019 01:25:52 GMT
Content-Type: application/json
Content-Length: 16
Server: api-gateway

{"status":"200"}

API網關返回消息：

HTTP/1.1 200 OK
Date: Tue, 15 Jan 2019 01:25:52 GMT
Content-Type: application/json
Content-Length: 16
Server: api-gateway
X-Request-Id: 454d689fa6984710b3ca486458fb08b
Access-Control-Allow-Origin: *

{"status":"200"}