原因:缺少 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;

另請參閱