fetch() header shows as application/x-www-form-urlencoded instead of application/json

Ingo Bürk

Update #2: This has been solved, see my own answer (which I cannot yet accept).

I'm running a React app on heroku using a node.js backend via Express. In the frontend, I want to send a POST request containing a JSON payload, which is sent like this:

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

The backend is set up like this:

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

Locally this all works fine, but deployed on heroku the request comes in with content type application/x-www-form-urlencoded instead of application/json, which is why the body-parser middleware doesn't parse the JSON.

Oddly enough this did work a couple days ago when I tried it once and I'm not aware of any changes I made in this area in the meantime.

What is causing the header to be wrong despite being explicitly set for the request? I could configure the middleware to read it anyway, but this seems like a workaround. I'd like to understand the actual root cause of the problem instead.

Update #1

I think it may have to do with the URL setup. Using a curl request from the command-line to serve the backend, the data is received when using http://my-app.herokuapp.com/api/shows, but not when using http://myurl.info/api/shows.

Ingo Bürk

As is the case so often, shortly after posting I've figured it out. The problem had actually nothing to do with the application whatsoever.

I'm using my own URL through a provider and had setup a reidrection to myapp.herokuapp.com, which turned out to be the problem. Heroku explains in detail how to configure a domain for a Heroku app and after following that procedure to use a CNAME entry, everything is working fine.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to POST with application/x-www-form-urlencoded header and URLSearchParams using isomorphic-fetch

Jsoup sends application/x-www-form-urlencoded instead of json

Post 'x-www-form-urlencoded' content with aurelia-fetch-client

ASP.NET Core Fetch POST FormData() application/x-www-form-urlencoded

How to post an array of values using `UrlFetchApp.fetch` with `application/x-www-form-urlencoded`?

Content-Type header [application/x-www-form-urlencoded] is not supported on Elasticsearch

CURL : Content-Type header [application/x-www-form-urlencoded] is not supported

Content-Type header [application/x-www-form-urlencoded] is not supported

Python requests module sends JSON string instead of x-www-form-urlencoded param string

Retrofit + POST method + www-form-urlencoded

Convert json to x-www-form-urlencoded

x-www-form-urlencoded in Xamarin

Grails RestfulController doesn't respond with a JSON when Content-Type: application/x-www-form-urlencoded header is present

Content-Type header [application/x-www-form-urlencoded] is not support error when import json data into elastic

Import OpenAPI 2.0 Postman collection and all POST request bodies are displayed as x-www-form-urlencoded, instead of raw JSON

application/x-www-form-urlencoded or multipart/form-data?

Axios post form urlencoded requests application/x-www-form-urlencoded

how to post body x-www-form-urlencoded using webclient?

Jersey client Post Request with x-www-form-urlencoded Fails

cURL send JSON as x-www-form-urlencoded

How to POST x-www-form-urlencoded in retrofit

NodeJS get value from formData x-www-form-urlencoded

Spring - wrong encoding POST request with x-www-form-urlencoded

OpenApi -API with X-WWW-FORM-URLEncoded as requestBody

Post a x-www-form-urlencoded request from React Native

How to send post request with x-www-form-urlencoded body

post application/x-www-form-urlencoded Alamofire

Swift 4 send POST request as x-www-form-urlencoded

Handling application/x-www-form-urlencoded posts