Problème CORS Express et Svelte (Sapper)

Bonsoir,

Je fais face à un problème que je ne comprend pas.

J’ai un site web développé avec Sapper, et une API avec Express.

Lorsque mon site fait un appel à Express, ça marche, mais pas tout le temps. Il arrive que j’ai l’erreur suivante :

Pourtant :

• Si j’appelle l’API depuis une instance locale du site, ça marche
• Si j’appelle une instance locale de l’API depuis une instance locale du site, ça marche
• J’ai app.use(cors()) dans mon application Express.

const dotenv = require("dotenv");
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");

const errors = require("./middlewares/errors");
const routes = require("./routes");

const app = express();

dotenv.config();

app.use(express.static("uploads"));

app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.get("/", (req, res, next) => {
  res.status(200).json({ success: true });
});

app.use(routes);

app.use(errors.error);
app.use(errors.notAllowed);

module.exports = app;

Ce que je comprend pas c’est pourquoi ça marche en local et pas avec la version en ligne.

Quelqu’un à une idée ?

Merci.

Edit : D’après mes recherches, c’est dû au fait que j’utilise Safari. Je vais télécharger Chrome et essayer avec, je vous donne un retour juste après.

Bonsoir, oh encore un problème CORS…

Essayes donc ma version maison (à placer au même endroit dans ton code) :

/* Entêtes CORS */
const cors = res => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header(
        'Access-Control-Allow-Headers',
        'Origin, X-Requested-With, Content-Type, Accept'
    );
    res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,PATCH');
};

app.use((req, res, next) => {
    cors(res);
    next();
});

Je viens d’essayer avec ton code, mais cela ne fonctionne toujours pas.

En revanche, je viens de voir que les requêtes API fonctionnent, mais pas si elles sont exécutées rapidement.

Par exemple, quand je sauvegarde ma page sur mon site, ça envois une première requête POST qui passe très bien, mais la requête GET appelée juste après ne passes pas. En revanche, cette même requête passe très bien si je l’appel plus tard dans le site.

Et j’ai le même problème avec une instance locale du site si je spam le bouton "Sauvegarder la page".

Au cas où cela viendrais de là, j’héberge mes deux applications (le front et l’API) sur grâce à Dokku sur DigitalOcean.

Edit : Ok, je viens de voir que NodeJS me renvois une erreur 502 quand je fait ne serais-ce que deux appels API avec Axios (il me renvois l’erreur à partir du deuxième appel).

Edit 2 : Je crois avoir trouvé… c’est tout bête (a voir si c’est bien ça).

Pour les tests, j’utilise le package "lowdb" pour sauvegarder mes données. Ce package permet en fait de se passer d’une base comme Postgres ou Mongo pour à la place enregistrer les données dans un fichier JSON.

Sauf que comme mon serveur est lancé avec Nodemon, il détecte un changement dans le fichier de base de données et donc redémarre le serveur… ce qui fait qu’il est indisponible pour le prochain appel API. D’où le fait que le serveur ne répond pas et n’envois pas de Header, et donc l’erreur du CORS apparaît.

Je vais vérifier si c’est bien ça, mais en tout cas, j’en suis quasi certain.

Edit 3 : C’est bien ça ! J’ai lancé le serveur avec PM2 et là ça marche.