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

另请参阅