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

Question

我是运行两个独立的服务器，通过 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: {
        historyApiFallback: true,
        hot: true,
        inline: true,

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

我已经为代理试过了

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

Answer 1

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

您的请求代码乍一看没问题。

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

How to make POST request via fetch API with local client and server?

javascript

fetch

webpack

webpack-dev-server