通过Apache服务器调用Node API时如何解决CORS错误

核心原因 #

浏览器发起CORS预检（OPTIONS请求）时，Apache的301重定向规则会优先触发，导致OPTIONS请求被跳转到Node服务的域名。但浏览器要求预检请求必须在原域名（abc.local）返回200/204响应，因此抛出CORS错误。

方案1：将外部重定向改为内部代理（推荐） #

把v2的R=301外部重定向改成内部代理（使用P标志），请求会在Apache内部转发到Node服务，不会触发浏览器端的重定向，OPTIONS请求也能正常被Node服务处理并返回正确的CORS头。

需要确保Apache已启用mod_proxy和mod_proxy_http模块（通常在httpd.conf中开启）。修改后的Rewrite规则如下：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_HOST} ^abc.local$
    # 用内部代理替代301重定向
    RewriteRule ^admin/webp/v2/(.*)$ http://localhost:4060/$1 [P,L]
    RewriteRule ^admin/webp/v1/(.*)$ http://localhost:3001/v1/$1 [L]
</IfModule>

优势：无需额外处理OPTIONS请求，请求全程在同域名下完成，符合CORS规范，同时保留原有的路径映射逻辑。

方案2：优先处理OPTIONS预检请求 #

如果必须保留301重定向（比如有特定业务需求），可以让Apache直接拦截OPTIONS请求，返回204状态码和正确的CORS头，避免触发重定向规则。

修改.htaccess的Headers和Rewrite规则部分：

<IfModule mod_headers.c>
    # 限制允许的源为Angular应用域名（带Credentials时不能用*）
    SetEnvIf Origin "^http://localhost:4000$" AccessControlAllowOrigin=$0
    Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header set Access-Control-Allow-Credentials "true"
    Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding, X-Auth-Token, content-type"
    # 缓存预检结果，减少重复请求
    Header always set Access-Control-Max-Age "1728000"
</IfModule>

<IfModule mod_rewrite.c>
    RewriteEngine On
    # 先处理OPTIONS请求，直接返回204
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=204,L]
    
    RewriteCond %{HTTP_HOST} ^abc.local$
    RewriteRule ^admin/webp/v2/(.*)$ http://localhost:4060/$1 [L,R=301]
    RewriteRule ^admin/webp/v1/(.*)$ http://localhost:3001/v1/$1 [L]
</IfModule>

说明：

• 先拦截所有OPTIONS请求，返回204状态码（无内容）并附带CORS头，让浏览器通过预检。
• 把Access-Control-Allow-Origin从*改为具体的Angular域名，因为当Access-Control-Allow-Credentials设为true时，CORS规范不允许使用通配符*，否则会导致凭证失效。

内容的提问来源于stack exchange，提问作者Navaneeth V