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

1

Обновление № 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 {}
});

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

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

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

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

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

Теги:
heroku
fetch-api

1 ответ

0
Лучший ответ

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню