404 ajax error in preproduction but not in local

I need your help. I’m not sure if it’s about WordPress actually. I’m currently developing a form scratch theme on which I need to send an AJAX request. Everything works fine in local. But not in pre-production where I get a 404 error. The idea is to :
– Create a canvas
– To get the data URL of the canvas in JS
– To send it in Ajax
– To save this data in a custom field

Here is the HTML

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

Here is the 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);
    });
});

Here is the 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' );

Here is what the console displays in local
{test: 'ok'}

Here is what the console displays in pre-production

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)

It works in local and in preproduction if I modify slightly the JS. Namely, if I pass any string to the “canvas” argument. Like this:

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);
        });
   });

Do you have a solution?
I look forward to reading you.

• This topic was modified 3 years ago by ostaladafab.
• This topic was modified 3 years ago by ostaladafab.
• This topic was modified 3 years ago by ostaladafab.