WordPress与VueJS跨域问题：预检响应中NF-REST-Key头未被允许

核心问题定位 #

错误提示明确指向：nf-rest-key请求头未被包含在预检响应的Access-Control-Allow-Headers列表中。这说明你的服务器端CORS配置未正确覆盖该Ninja Forms扩展插件的接口规则，或配置优先级不足。

针对性修复方案 #

1. 使用WordPress官方REST钩子配置CORS（推荐） #

直接在functions.php中写header()可能被WP的REST API机制覆盖，改用rest_pre_serve_request钩子确保配置生效：

add_filter( 'rest_pre_serve_request', function( $value ) {
    $allow_origin = 'https://candriam-app.nanosite.tech';
    header( 'Access-Control-Allow-Origin: ' . esc_url( $allow_origin ) );
    header( 'Access-Control-Allow-Methods: GET, POST, OPTIONS' );
    header( 'Access-Control-Allow-Credentials: true' );
    // 明确包含nf-rest-key请求头，HTTP头不区分大小写，但需与请求格式匹配
    header( 'Access-Control-Allow-Headers: Content-Type, nf-rest-key' );

    // 直接响应OPTIONS预检请求，避免后续逻辑干扰
    if ( $_SERVER['REQUEST_METHOD'] === 'OPTIONS' ) {
        status_header(200);
        exit();
    }

    return $value;
});

2. 补全.htaccess的CORS规则 #

若使用Apache服务器，需在.htaccess中完整配置CORS，包括OPTIONS请求处理：

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://candriam-app.nanosite.tech"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
    Header set Access-Control-Allow-Credentials "true"
    Header set Access-Control-Allow-Headers "Content-Type, nf-rest-key"

    # 拦截OPTIONS请求直接返回200
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]
</IfModule>

3. 排查插件自身问题 #

• 检查该Ninja Forms扩展插件是否自带CORS配置项，优先使用插件内置的域名/请求头允许设置
• 升级插件到最新版本，修复可能存在的CORS规则硬编码BUG
• 临时禁用其他插件，排除冲突导致的配置失效

关于securityheaders.com的检查 #

在该工具中，你应该能看到Access-Control-Allow-Origin、Access-Control-Allow-Headers等配置头。如果未显示，说明服务器配置未生效，需排查：

• 服务器缓存是否刷新
• Apache/Nginx全局配置是否覆盖了.htaccess或functions.php的设置

内容的提问来源于stack exchange，提问作者Nicolas Troadec