根据 HTTP referer 指定标头集

Question

我正在开发两个独立的 ReactJS 项目，它们都使用了 PHP API。两个 React 项目都在开发服务器的端口 3000 上运行，另一个在 3001 上运行。由于这些端口上的 ReactJS 将转到端口 80 上的 API，因此它会触发无效的 CORS 请求，因此我最初通过将以下内容添加到我的 Apache 文件来解决这个问题：

Header set Access-Control-Allow-Origin: "http://localhost:3000"

我现在想要进行设置，以便我可以根据请求来自http://localhost:3000和来设置不同的访问控制允许来源http://localhost:3001。

我尝试了以下方法，但似乎都没有效果：

<IfModule %{HTTP_REFERER} == "http://localhost:3001">
    Header set Access-Control-Allow-Origin: "http://localhost:3001"
</IfModule>

<IfModule %{HTTP_REFERER} == "http://localhost:3000">
    Header set Access-Control-Allow-Origin: "http://localhost:3000"
</IfModule>

但是我收到一个 CORS 错误，指出我没有指定 Access-Control-Allow-Origin 标头。

我正在尝试做的事情是否可能？如果可以，我将如何实现我想要做的事情？

更新

我一直在尝试弄清楚这一点，@ezra-s 是对的，因为我显然应该使用 If 而不是 IfModule，但仍然没有按照我的期望运行，所以下面是我现在所拥有的：

<If "%{HTTP_REFERER} == 'http://localhost:3001/'">
    Header set Access-Control-Allow-Origin: "http://localhost:3001"
</If>

<If "%{HTTP_REFERER} == 'http://localhost:3000/'">
    Header set Access-Control-Allow-Origin: "http://localhost:3000"
</If>

我还更新了 apache 访问日志以使用以下日志格式显示引荐来源：

LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\"" common

我在 Apache 访问日志中看到以下内容

::1 - - [15/8/2020:14:55:38 +0100] "POST /supportportal_api/admin-login.php HTTP/1.1" 500 5495 "http://localhost:3001/"

因此，尽管 Apache 访问日志中的引荐来源与我的 If 语句匹配，但我在 chrome 中仍然收到以下错误：

CORS 策略阻止了从源“http://localhost:3001”访问“http://localhost/supportportal_api/admin-login.php”的权限：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

因此看起来由于某种原因我的 If 语句没有匹配，但看不出任何原因。