fetch() en-tête montre comme application/x-www-form-urlencoded au lieu de l'application/json

Question

Mise à jour # 2: Cela a été résolu, voir ma propre réponse (que je ne peux pas encore accepter). Je lance une application React sur heroku en utilisant un backend node.js via Express. Dans le frontend, je veux envoyer une requête POST contenant une charge utile JSON, qui est envoyé comme ceci:

fetch('/api/shows', { 
     method: 'POST', 
     accept: 'application/json', 
     headers: new Headers({ 
      'Content-Type': 'application/json', 
     }), 
     // mode: 'cors', // tried this, but no effect 
     // cache: 'default', // tried this, but no effect 
     body: JSON.stringify({ "foo": "bar" }), 
    }).then(response => { 
     return response.json(); 
    }).then(response => { 
     // … handling the response … 
    }).catch(err => { 
     // … handling errors … 
    }); 

Le back-end est configuré comme ceci:

const express = require('express'); 
const bodyParser = require('body-parser'); 

const app = express(); 

app.set('port', (process.env.PORT || 3001)); 

if (process.env.NODE_ENV === 'production') { 
    app.use(express.static('frontend/build')); 
} 

app.post('/api/shows', bodyParser.json(), (req, res) => { 
    const data = req.body; 
    console.log(data); // shows {} 
}); 

Localement tout cela fonctionne très bien, mais déployé sur heroku la demande arrive avec le type de contenu application/x-www-form-urlencoded au lieu de application/json, ce qui explique pourquoi le middleware body-parser n'analyse pas le JSON.

Assez curieusement ce a fait il ya quelques jours quand je l'ai essayé une fois et je ne suis pas au courant des changements que j'ai faits dans ce domaine entre-temps.

Qu'est-ce qui cause que l'en-tête est erroné alors qu'il est explicitement défini pour la demande? Je pourrais configurer le middleware pour le lire de toute façon, mais cela semble être une solution de contournement. Je voudrais comprendre la cause réelle du problème à la place.

Mise à jour # 1

Je pense qu'il peut avoir à faire avec la configuration d'URL. En utilisant une requête curl depuis la ligne de commande pour servir le backend, les données sont reçues en utilisant http://my-app.herokuapp.com/api/shows, mais pas en utilisant http://myurl.info/api/shows.

Answer 1

Comme c'est souvent le cas, peu de temps après avoir posté, je l'ai compris. Le problème n'avait en fait rien à voir avec l'application. J'utilise ma propre URL via un fournisseur et j'ai configuré une redirection vers myapp.herokuapp.com, ce qui s'est avéré être le problème. Heroku explains in detail comment configurer un domaine pour une application Heroku et après avoir suivi cette procédure pour utiliser une entrée CNAME, tout fonctionne bien.