如何使用本地客户端和服务器通过 fetch API 发出 POST 请求？答案

【问题标题】：How to make POST request via fetch API with local client and server?如何使用本地客户端和服务器通过 fetch API 发出 POST 请求？
【发布时间】：2019-03-20 13:36:51
【问题描述】：

我通过 webpack 和 express 运行两个独立的服务器；开发服务器和客户端服务器。

我在客户端上有一个按钮，我想在单击按钮时向服务器发送 POST 请求。我正在使用来自https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch的示例创建请求

const testButton = document.querySelector(`button.test`);

const sendRequest = event => {
    event.preventDefault(); //stop or prevents the browser from executing the default action

    postData(`http://localhost:8080/`, { answer: 42 }) // line:32
        .then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call , line:33
        .catch(error => console.error(error));

    function postData(url = ``, data = {}) {
        // Default options are marked with *
        return fetch(url, { // line:38
            method: 'POST', // *GET, POST, PUT, DELETE, etc.
            mode: 'no-cors', // no-cors, cors, *same-origin
            cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
            credentials: 'same-origin', // include, *same-origin, omit
            headers: {
                'Content-Type': 'application/json',
                // "Content-Type": "application/x-www-form-urlencoded",
            },
            redirect: 'follow', // manual, *follow, error
            referrer: 'no-referrer', // no-referrer, *client
            body: JSON.stringify(data), // body data type must match "Content-Type" header
        });
        // .then(response => response.json()); // parses JSON response into native Javascript objects
    }

    console.log(`sends POST request from here`);
};
testButton.addEventListener(`click`, sendRequest);

当我点击按钮时，我得到这个错误：

sends POST request from here // console.log message in request
POST http://localhost:8080/ 404 (Not Found)
postData @ index.js:38
sendRequest @ index.js:32
index.js:33 {}

package.json 中的脚本

    "scripts": {
        "start": "webpack",
        "dev-server": "nodemon bin/dev localhost 8080",
        "dev-client": "webpack-dev-server --port 3000"
    }

webpack.config.js 中的devServer


    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,

        host: 'localhost',
        port: 3000,
         proxy: {
          '/api/': 'http://localhost:8080',
          }
    },

我已经为代理尝试过这个

proxy: {
          '^/api/*': {
            target: 'http://localhost:8080/api/',
            secure: false
          }
        }

【问题讨论】：

在您的第 32 行中，用于 POST 您的请求的 URL 是 localhost:8080，但好像您的 devServer URL 将是 localhost:8080/api，对吧？
是的。当我第一次输入时，我意识到了。然后我将 webpack.config.js 更改为 proxy: { '/api/': 'http://localhost:8080', } 并编辑了我的问题。

标签： javascript webpack fetch webpack-dev-server

【解决方案1】：

您是否启动了 express 服务器？
您的 express 应用是否有空端点映射（也必须是 POST 映射）？
如果您使用 docker（用于 express），它会侦听您的内部端口吗？

您的请求代码乍一看很好。

【讨论】：

我的 express 应用没有空端点映射（它也必须是 POST 映射）app.post('/', function (req, res) { res.send('POST request to the homepage') }) 解决了这个问题。