JavaScript Fetch с методом "POST" вызывается дважды

Question

В рамках проекта, который я делаю, я написал сервер приложений Spring Framework на Java.Теперь я хочу написать клиент для него, используя JavaScript, используя webpack.В одном из моих файлов я вызываю fetch с методом POST, но по какой-то причине он вызывается дважды, и мой сервер выдает исключение (потому что он пытается поместить один и тот же объект с тем же ключом в базу данных), я думал, что ему нужно что-то делатьс помощью CORS я включил добавленный файл WebConfig на свой сервер из источника, найденного на этом сайте.Но, к сожалению, это все еще происходит, и я не знаю почему.

мой js-файл со сборкой:

const button = document.getElementById('register');
const url = "http://localhost:8083/playground/users";
let form;

button.addEventListener("click", async () => {
  form = {
    email: document.getElementById("email").value,
    username: document.getElementById("username").value,
    avatar: document.getElementById("avatar").value,
    role: "Guest"
  };

  const response = await fetch(url, {
            method: "POST",
            mode: "cors",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(form),
          });

  const resultJson = await response.json();
  console.log(resultJson);
  //location.href='./confirm.html';
});

webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const JS_JSX_PATTERN = /\.jsx?$/;

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html'
    }),
    new HtmlWebpackPlugin({
      filename: 'confirm.html',
      template: 'src/confirm.html',
      chunks: []
    })
  ],
  module: {
    loaders: [
      {
        test: JS_JSX_PATTERN,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-1']
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  }
};

и результат вызова fetch делает его вызываемым дважды, как можно увидеть здесь:

что я здесь не так делаю?

Answer 1

Похоже, вы используете пользовательский шаблон HtmlWebpackPlugin - есть ли у вас тег сценария, указывающий на ./bundle.js в этом src/index.html случайно?

HtmlWebpackPlugin предназначен длядобавить скрипт для вас автоматически.Глядя на скриншот, я предполагаю, что VM....bundle.js - это тот, который подается из памяти webpack-dev-server, а второй bunde.js - это тот, который вы создали локально в предыдущем webpack build.

Answer 2

Это может быть из-за неправильного пути к комплекту, попробуйте использовать path.resolve ("your output directrory")

....
module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname),
    filename: 'bundle.js'
  },
...