WordPress 自定义 API 端点 POST 请求在 React 中失败

Question

我有一个 WordPress 后端，我在其中向 API 添加了自己的自定义端点：

// retrieve countries
register_rest_route( $namespace, '/countries',
    array(
        'methods'  => 'GET',
        'callback' => array( $this, 'get_countries' ),
    )
);

// check answer
register_rest_route( $namespace, '/check_answer',
    array(
        'methods'  => 'POST',
        'callback' => array( $this, 'check_answer' ),
    )
);

我已经这样设置了我的环境：https : //example.com是 React 应用程序所在的位置，WordPress 位于https://example.com/wp上的子目录中

我的 React 应用程序向上述端点发出 POST 和 GET 请求。我有一个生产环境变量，我在其中设置了 API 的基本 URL，即https://example.com/wp/wp-json/game（“游戏”是我的命名空间），因此我可以使用 Axios 向https://example.com/wp/wp-json/game/countries和发出请求，https://example.com/wp/wp-json/game/check_answer问题就来了。

我的服务器已配置为可以在不使用www. 所以https://example.com和https://www.example.com都服务于同一个应用程序。

但这会为我的自定义端点带来一些有趣的问题：GET 请求始终有效。但 POST 请求仅在我从https://example.com尝试时才有效，而不是从https://www.example.com尝试。在后者的情况下，它只是简单地向我显示一个失败的请求。没有回应，什么都没有。

我用谷歌搜索过，它似乎与 CORS 有关，但我无法修复它。这里有什么想法吗？

Answer 1

首先，我想指出您的Get请求有效，因为它们属于不会触发预检请求的类别。虽然您的Post请求可能使用一些标头，将其从类别中删除，因此需要预检通过。如果您有兴趣阅读更多内容，请参阅以下文档链接。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests

现在，根据您的评论，您收到的错误是

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

正如您在评论中提到的，您用于设置标头的方法不适用于休息请求。您可以在您的文件或插件文件中使用以下函数functions.php将原点设置为*.

function sr_rest_send_cors_headers( $value ) 
{   
    header( 'Access-Control-Allow-Origin: *' );
    header( 'Access-Control-Allow-Methods: OPTIONS, GET, POST, PUT, PATCH, DELETE' );
    header( 'Access-Control-Allow-Credentials: true' );
    header( 'Vary: Origin', false );

    return $value;
}
add_filter( 'rest_pre_serve_request', 'sr_rest_send_cors_headers', 11 );

尽管我推荐 WordPress 默认执行的操作。如果您检查，wp-includes/rest-api.php您会发现我已根据您的目的修改了原始函数。如果您有兴趣看一下，这里是 trac 链接。

https://core.trac.wordpress.org/browser/tags/5.4/src/wp-includes/rest-api.php#L574