原因:缺少 CORS 標頭 'Access-Control-Allow-Origin'

原因

Reason: CORS header 'Access-Control-Allow-Origin' missing

哪裡出錯了?

CORS 請求的響應缺少必需的 Access-Control-Allow-Origin 標頭,此標頭用於確定當前源中執行的內容是否可以訪問該資源。

如果伺服器在您的控制之下,請透過將其新增到 Access-Control-Allow-Origin 標頭的值中,將請求站點的源新增到允許訪問的域集中。

例如,要允許 https://example.com 上的站點使用 CORS 訪問資源,標頭應為

http
Access-Control-Allow-Origin: https://example.com

您還可以透過使用 * 萬用字元將站點配置為允許任何站點訪問。您只應將其用於公共 API。私有 API 絕不應使用 *,而應設定特定的域或域列表。此外,萬用字元僅適用於將 crossorigin 屬性設定為 anonymous 的請求,並且它會阻止在請求中傳送憑據(如 Cookie)。

http
Access-Control-Allow-Origin: *

警告:使用萬用字元允許所有站點訪問私有 API 是一個壞主意。

要允許任何站點進行 CORS 請求而不使用 * 萬用字元(例如,為了啟用憑據),您的伺服器必須讀取請求的 Origin 標頭的值,並使用該值設定 Access-Control-Allow-Origin,並且還必須設定一個 Vary: Origin 標頭,以指示某些標頭是根據源動態設定的。

常見 Web 伺服器的示例

設定標頭的確切指令取決於您的 Web 伺服器。

在以下示例中,

Apache文件)中,在伺服器配置中(在適當的 <Directory><Location><Files><VirtualHost> 部分內)新增以下行。配置通常在 .conf 檔案(httpd.confapache.conf 是這些檔案的常見名稱)或 .htaccess 檔案中找到

apacheconf
Header set Access-Control-Allow-Origin 'https://example.com'

對於 Nginx文件),設定此標頭的命令是

nginx
add_header 'Access-Control-Allow-Origin' 'https://example.com' always;

另見