WP Engine调用JWT Authentication for WP-API登录接口返回页面内容而非Token

在本地XAMPP环境中，使用react-wp-theme的WordPress站点调用JWT Authentication for WP-API的登录接口能正常获取Token，但部署到WP Engine后，接口返回200状态却返回主题的index.php页面内容，而非预期的JWT Token。已严格按照插件文档完成配置。

已配置的代码 #

.htaccess规则 #

RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]

SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

wp-config.php配置 #

define('JWT_AUTH_SECRET_KEY', 'your-top-secret-key');
define('JWT_AUTH_CORS_ENABLE', true);

错误响应内容 #

<!DOCTYPE html>
<html lang="en">

<head>
    <script
        src='/wp-content/themes/wpn-react-wp-theme/react-src/node_modules/@devloco/create-react-wptheme-utils/wpThemeClient.js'>
    </script>

    <script
        src='/wp-content/themes/wpn-react-wp-theme/react-src/node_modules/@devloco/create-react-wptheme-utils/wpThemeErrorOverlay.js'>
    </script>

    <script>
        wpThemeClient.start("ws", "127.0.0.1", "8090"); 
    </script>

    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/wp-content/themes/wpn-react-wp-theme/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-wptheme" />
    <link rel="apple-touch-icon" href="/wp-content/themes/wpn-react-wp-theme/logo192.png" />

    <link rel="manifest" href="/wp-content/themes/wpn-react-wp-theme/manifest.json" />
    <link rel="stylesheet" 
 href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
crossorigin="anonymous" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap"
    
    <title>Word Prev</title>
    <link href="/wp-content/themes/wpn-react-wp-theme/static/css/main.chunk.css?76e963b2483ab6ad865c" rel="stylesheet">
</head>

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

    <script src="/wp-content/themes/wpn-react-wp-theme/static/js/bundle.js?76e963b2483ab6ad865c"></script>
    <script src="/wp-content/themes/wpn-react-wp-theme/static/js/0.chunk.js?76e963b2483ab6ad865c"></script>
    <script src="/wp-content/themes/wpn-react-wp-theme/static/js/main.chunk.js?76e963b2483ab6ad865c"></script>
</body>

</html>

React端API调用代码 #

axios.post('/wp-json/jwt-auth/v1/token', {
  username: username,
  password: password,
})
.then((response) => {
  const token = response.data.token; 
  localStorage.setItem('token', token); 
})
.catch((error) => {
  console.error(error);
});

1. 调整.htaccess规则，优先处理WP REST API请求 #

WP Engine环境下，React主题的路由规则可能会拦截/wp-json/路径，需要让WordPress优先处理API请求：

# 优先放行WP REST API路径
RewriteRule ^wp-json/ - [L]

# 再处理React路由的 fallback 规则
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

2. 修正HTTP_AUTHORIZATION头传递规则 #

WP Engine的服务器配置可能过滤了Authorization头，替换为官方推荐的规则：

SetEnvIfNoCase ^Authorization$ "(.+)" HTTP_AUTHORIZATION=$1

3. 使用绝对URL发起API请求 #

避免相对路径在WP Engine的子目录/CDN配置下解析错误：

const siteUrl = window.location.origin;
axios.post(`${siteUrl}/wp-json/jwt-auth/v1/token`, {
  username: username,
  password: password,
})
.then((response) => {
  const token = response.data.token; 
  localStorage.setItem('token', token); 
})
.catch((error) => {
  console.error(error);
});

4. 排除JWT API路径的缓存 #

WP Engine的页面缓存可能误缓存API响应，在控制面板的缓存设置中，添加/wp-json/jwt-auth/*到缓存排除列表。

5. 验证JWT插件核心配置 #

• 确保JWT_AUTH_SECRET_KEY使用强密钥，生产环境不要用示例值
• 确认JWT_AUTH_CORS_ENABLE已设为true，若React应用跨域，需确保WP Engine的CORS配置允许对应域名请求

内容的提问来源于stack exchange，提问作者Veera Silamban