ajax - WordPress：预生产中出现 404 axios 错误，但在本地没有

Question

我需要你的帮助。我不确定它是否真的与 WordPress 有关。我目前正在开发一个表单草稿主题，我需要在该主题上发送 AJAX 请求。在本地一切正常。但不是在我收到 404 错误的预生产中。这个想法是：

1. 创建画布
2. 在JS中获取画布的数据URL
3. 在 Ajax 中发送
4. 将此数据保存在自定义字段中

这是HTML

<canvas id="canvas" width="700" height="700"></canvas>
<img id="background" src="/path-to-image/background.png" /> 

这是JS

let canvas = document.getElementById("canvas");
let background = document.getElementById("background");
let ctx = canvas.getContext("2d");

image.addEventListener("load", () => {
  ctx.drawImage(background, 0, 0, 700, 700);
  ctx.fillText("John", 170, 381);
  ctx.fillText("Doe", 205, 401);

  let endpoint = "/path-to-file/admin-ajax.php";
  let form_data = new FormData();
  form_data.append("action", "set_canvas");
  form_data.append("canvas", canvas.toDataURL());
  axios
    .post(endpoint, form_data)
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error);
    });
});

这是PHP

function set_canvas() {

    $response = array(
        'test' => 'ok',
    );

    echo wp_send_json($response);
    wp_die();
}

add_action( 'wp_ajax_set_canvas', 'set_canvas' );
add_action( 'wp_ajax_nopriv_set_canvas', 'set_canvas' );

这是控制台在本地显示的内容

{test: 'ok'}

这是控制台在预生产中显示的内容

Error: Request failed with status code 404
at e.exports (createError.js:16)
at e.exports (settle.js:17)
at XMLHttpRequest.E (xhr.js:66)

如果我稍微修改 JS，它可以在本地和预生产中使用。也就是说，如果我将任何字符串传递给“canvas”参数。像这样：

let canvas = document.getElementById("canvas");
let background = document.getElementById("background");
let ctx = canvas.getContext("2d");

image.addEventListener("load", () => {
    ctx.drawImage(background, 0, 0, 700, 700);
    ctx.fillText("John", 170, 381);
    ctx.fillText("Doe", 205, 401);

    let endpoint = "/chemin-vers-le-fichier/admin-ajax.php";
    let form_data = new FormData();
    form_data.append("action", "set_canvas");
    form_data.append("canvas", "string"); // <--- Here
    axios
        .post(endpoint, form_data)
        .then((response) => {
            console.log(response.data);
        })
        .catch((error) => {
            console.log(error);
        });
   });

你有解决方案吗？

我期待着阅读你。

标签： ajaxwordpressaxios