Erreur 404 AJAX en prod mais pas en local

WordPress :5.8
Statut : non résolu

Ce sujet contient 1 réponse, 2 participants et a été mis à jour pour la dernière fois par mathieu42, le il y a 3 années et 8 mois.

2 sujets de 1 à 2 (sur un total de 2)

Auteur

Messages
10 novembre 2021 à 13 h 30 min #2388619
Ostalada
Participant

Initié WordPress
16 contributions
Ma configuration WP actuelle
- Version de PHP/MySQL : 7.4
- Thème utilisé : Thème from scratch
- Extensions en place : ACF Pro, WooCommerce, Yoast
- Nom de l’hébergeur : o2switch
Problème(s) rencontré(s) :

Bonjour à tous,

Je suis sur un os. Je ne suis pas sûr que ça concerne WordPress en réalité. Je développe actuellement un thème form scratch sur lequel j’ai besoin d’envoyer un requête AJAX. Tout fonctionne bien en local. Mais pas en préproduction, sur un serveur o2switch, où j’obtiens une erreur 404.

L’idée est de :
- Créer un canvas
- De récupérer la data URL du canvas en JS
- De l’envoyer en Ajax
- D’enregistrer cette donnée dans un custom field
Voici le HTML
```
<canvas id="canvas" width="700" height="700"></canvas>
<img id="background" src="/chemin-vers-mon-image/background.png" />
```
Voici le 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 = "/chemin-vers-le-fichier/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);
    });
});
```
Voici le 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' );
```
Voici ce qu’affiche la console en local
```
{test: 'ok'}
```
Voici ce qu’affiche la console en pré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)
```
Pour info, ça fonctionne en local et en preproduction, si je modifie légèrement le JS. A savoir, si je passe une chaine de caractère quelconque à l’argument « canvas ». Comme ceci :
```
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");
  axios
    .post(endpoint, form_data)
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error);
    });
});
```
Vous auriez une solution ?

Hâte de vous lire,
- Ce sujet a été modifié il y a 3 années et 8 mois par Ostalada. Raison : Quelques fautes d'ortho et un mauvais copier-coller de codes
- Ce sujet a été modifié le il y a 3 années et 8 mois par Ostalada.
10 novembre 2021 à 23 h 19 min #2388645

mathieu42
Participant

Maître WordPress
2025 contributions

pour débuger les appels AJAX, vous pouvez utiliser l’onglet « Réseau » de la console de développement de votre navigateur.
par exemple avec Firefox, faites Ctrl + Maj + E
https://developer.mozilla.org/fr/docs/Outils/Moniteur_r%C3%A9seau
Auteur

Messages