處理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路徑，請本地化Ajax的路徑以在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中填充結果。