在 WordPress 插件中处理跨域 AJAX POST 请求

Question

我有下一个情况：

• 我有带有简单 API 的 WP 插件。
• 此插件可以安装到具有不同文件夹结构（例如 WPEngine）的不同主机上的 WP 实例中，并且无法编辑 .htaccess
• 另一个域上有一个客户端，它应该通过 AJAX 范围的数据发送到我的插件并获取计算数据（跨域请求）；

插件 - 这是我的产品。

AJAX 客户端 - 另一个用户，他们将使用我的“计算器”。

所以问题：

• 我应该如何在我的插件中捕获这个请求？
• AJAX 客户端应该使用哪个 URL 来访问我的 API？我不能使用带有插件完整路径的 URL 和带有处理程序的文件。
• 将超级了解 AJAX 请求方法的外观。

Answer 1

此方法不安全。 您应该使用 WP rest API 来接受跨域请求。 此外，您应该添加随 WP rest API 一起提供的 auth 1.0。 这是一个链接，向您展示如何将您自己的端点添加到其余 api https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-custom-endpoints/

这里的链接向您展示了如何使用 auth 1.0 进行身份验证来保护您的 api。 https://wordpress.org/plugins/rest-api-oauth1/

希望对你有帮助

Answer 2

您需要在 PHP 中创建一个函数来对您的服务器进行 API 调用并将其添加到 wp_ajax 和 wp_ajax_nopriv 挂钩中。

add_action( 'wp_ajax_your_ajax_function', 'your_ajax_function' );
add_action( 'wp_ajax_nopriv_your_ajax_function', 'your_ajax_function' );
function your_ajax_function() {
    $url = 'http://www.google.com'; // url to your rest API
    if ( isset( $_POST['data'] ) ) {
        $response = wp_remote_post( $url, array( 'data' => $_POST['data'] ) );
        if ( is_wp_error( $response ) ) {
            echo $response->get_error_message();
            exit;
        }
        else {
            wp_send_json( $response );
        }
    }
}

为了确保您可以访问正确的 ajax 路径，localize the path for ajax for use in javascript：

add_action( 'wp_enqueue_scripts', 'localize_ajax' );
function localize_ajax() {
    wp_localize_script( 'jquery', 'ajaxurl', admin_url( 'admin-ajax.php' ) );
}

注意：将jquery 更改为您的javascript 文件和/或确保在jquery 已在页面上排队后创建您的函数。

接下来，在 javascript 中创建您的函数，该函数调用您的 ajax 函数，并在 data 字段中传递用户值并将其附加到某个事件侦听器：

function yourFunction() {
  jQuery.ajax( {
    method: 'POST',
    url: ajaxurl,
    data: {
      'action' : 'your_ajax_function',
      'data' : 'test'
    },
    success: function( response ) {
      // do what you want with your response
      console.log( response );
    }
  });
}

这将返回来自您的 API 调用的响应，因此请使用 response 在 DOM 中填充您的结果。