WordPress REST API 同域身份验证疑难杂症：深入探讨解决方案

2024-03-06 05:56:54

WordPress REST API 同域身份验证疑难杂症

引言

WordPress REST API 是一种强大的工具，可让你在 Vue 应用程序中与 WordPress 核心数据和功能交互。然而，当在同一域内使用身份验证时，可能会遇到一些意外行为。本指南将深入探讨这个问题，并提供解决此问题的分步解决方案。

问题

在本地环境中，使用 REST API 进行身份验证可能工作正常。但是，当应用程序部署到与 REST API 位于同一域时，身份验证可能会返回错误的结果。特别是，即使已登录为管理员，你也会收到未登录的响应。注销后，身份验证才能正常工作。

解决方案

解决此问题的关键在于全面了解影响 REST API 身份验证的因素。以下步骤将引导你逐步解决问题：

1. 检查 CORS 设置

跨域资源共享 (CORS) 允许不同域之间的通信。确保你的 WordPress REST API 已启用 CORS。可以在 .htaccess 文件中添加以下代码：

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>

2. 验证 REST API 权限

自定义 REST API 端点应具有适当的权限。将 permission_callback 设置为 __return_true 将允许所有人访问端点。根据需要调整权限以限制访问。

3. 检查令牌有效性

验证在请求标头中使用的令牌是否有效且未过期。按照官方指南使用 WordPress API 创建和刷新令牌。

4. 调试请求

使用浏览器开发者工具或其他调试工具检查请求和响应。查看响应代码和标头，以了解问题的根本原因。

5. 检查插件或主题冲突

禁用其他插件或主题，以确定它们是否干扰了 REST API 的身份验证。逐一启用插件或主题，直到找到导致问题的那个。

6. 查看日志文件

查看 WordPress 日志文件，以获取有关身份验证错误的更详细消息。日志文件通常位于 wp-content/debug.log。

示例代码

自定义 REST API 端点可以更新如下：

function custom_login_status_endpoint() {
    register_rest_route('custom/v1', '/login-status/', array(
        'methods' => 'GET',
        'callback' => 'check_login_status',
        'permission_callback' => function () {
            return current_user_can('read'); // 限制访问需要 'read' 权限
        },
    ));
}

Vue 应用程序中的代码可以更新为：

axios.get('https://example.com/wp-json/custom/v1/login-status/', {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json',
          },
        })
        .then(response => {
           console.log(response.data);
        }