fetch() header 显示为 application/x-www-form-urlencoded 而不是 application/json

Question

更新#2：这个已经解决了，看我自己的回答（我还不能接受）。

我是运行 heroku 上的 React 应用程序，使用 node.js 后端通过 Express。在前端，我想发送一个包含 JSON 负载的 POST 请求，它是这样发送的：

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。

奇怪的是，确实几天前我尝试了一次，但我不知道同时我在这方面所做的任何更改。

尽管已为请求明确设置，但 header 是什么原因造成的？我可以配置中间件来读取它，但这似乎是一种解决方法。相反，我想了解问题的实际根本原因。

更新 #1

我认为这可能与 URL 设置有关。使用来自 command-line 的 curl 请求为后端服务，使用 http://my-app.herokuapp.com/api/shows, but not when using http://myurl.info/api/shows.

时接收到数据

Answer 1

就像经常发生的情况一样，在发布后不久我就弄明白了。该问题实际上与应用程序无关。

我通过提供商使用我自己的 URL，并设置了到 myapp.herokuapp.com 的重定向，结果证明这是问题所在。 Heroku explains in detail 如何为 Heroku 应用程序配置域并按照该过程使用 CNAME 条目后，一切正常。

fetch() header 显示为 application/x-www-form-urlencoded 而不是 application/json

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

javascript

json

heroku

node.js

fetch-api