reactjs - 即使已设置标头，也不存在“Access-Control-Allow-Origin”标头

Question

让我先说一下我了解 CORS 的工作原理以及在请求跨站点资源时如何不收到错误消息。

不幸的是，无论出于何种原因，我仍然收到这个。

过程：

1. 我在https://ironeko.com/加载我的网站
2. 在 Chrome 上，只有 Chrome，我收到以下错误

    Access to image at 'https://api.ironeko.com/wp-content/uploads/2019/08/Group-12-3-300x272.png' from origin 'https://ironeko.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

但是，来自同一资源的所有其他图像在第一页加载时都可以正常加载。

这是在我的.htaccess文件中：

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header Set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>

我是从Mozilla那里得到的。

我检查了我在 Apache 中启用的模块：

 core_module (static)
 so_module (static)
 watchdog_module (static)
 http_module (static)
 log_config_module (static)
 logio_module (static)
 version_module (static)
 unixd_module (static)
 access_compat_module (shared)
 actions_module (shared)
 alias_module (shared)
 auth_basic_module (shared)
 authn_core_module (shared)
 authn_file_module (shared)
 authz_core_module (shared)
 authz_host_module (shared)
 authz_user_module (shared)
 autoindex_module (shared)
 deflate_module (shared)
 dir_module (shared)
 env_module (shared)
 filter_module (shared)
 headers_module (shared) <----
 http2_module (shared)
 mime_module (shared)
 mpm_event_module (shared)
 negotiation_module (shared)
 proxy_module (shared)
 proxy_fcgi_module (shared)
 proxy_http_module (shared)
 reqtimeout_module (shared)
 rewrite_module (shared)
 setenvif_module (shared) <----
 socache_shmcb_module (shared)
 ssl_module (shared)
 status_module (shared)

（无论如何，即使没有 IfModule，这仍然不起作用）

编辑：我以前认为问题是由我的正常图像请求引起的。但我正在使用react-palette提出次要请求。这就是我认为实际上导致 CORS 错误的原因。

function returnImageColor(src) {
  const { data, loading, error } = usePalette(src);
  return data;
}

这里发生了什么？为什么这只是发生在 Chrome 上？CORS 标头中是否有错误？

标签： reactjsapachecorsaxios