Заголовок fetch() отображается как application/x-www-form-urlencoded вместо application/json

Question

Обновление № 2: это было решено, см. Мой собственный ответ (который я пока не могу принять).

Я запускаю приложение React на heroku с помощью бэкэнда node.js через Express. Во внешнем интерфейсе я хочу отправить запрос POST, содержащий полезную нагрузку JSON, который отправляется так:

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

Бэкэнд настроен так:

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

Локально это все отлично работает, но при развертывании на героку запрос приходит с типом контента application/x-www-form-urlencoded вместо application/json Вот почему промежуточное ПО body-parser не анализирует JSON.

Как ни странно, это сработало пару дней назад, когда я попробовал один раз, и я не знаю ни о каких изменениях, которые я сделал в этой области за это время.

Что заставляет заголовок быть неправильным, несмотря на то, что он явно установлен для запроса? В любом случае я мог бы настроить промежуточное программное обеспечение для его чтения, но это похоже на обходной путь. Я хотел бы понять истинную причину проблемы вместо этого.

Обновление № 1

Я думаю, что это может иметь отношение к настройке URL. Используя запрос curl из командной строки для обслуживания бэкэнда, данные принимаются при использовании http://my-app.herokuapp.com/api/shows, но не при использовании http://myurl.info/api/shows.

Answer 1

Как это часто бывает, вскоре после публикации я понял это. Проблема на самом деле не имеет ничего общего с приложением.

Я использую свой собственный URL через провайдера и настроил перенаправление на myapp.herokuapp.com, что оказалось проблемой. Heroku подробно объясняет, как настроить домен для приложения Heroku, и после выполнения этой процедуры для использования записи CNAME все работает нормально.