title: JavaScript Fetch with method "POST" is called twice
body: <p>As part of a project I'm doing, I wrote a spring framework application server in Java. 
  I now want to write a client for it using JavaScript using webpack.
  In one of my files I call fetch with POST method, but for some reason, it's called twice and my server throws an exception (because it tries to put the same object with the same key in the database)
  I thought it had something to do with CORS, so I enabled added a WebConfig file to my server from a source I found on this website.
  But, unfortunately, it still occurs and I don't know why.</p>
  
  <p>my js file with the fetch:</p>
  
  <pre><code>const button = document.getElementById('register');
  const url = "http://localhost:8083/playground/users";
  let form;
  
  button.addEventListener("click", async () =&gt; {
    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';
  });
  </code></pre>
  
  <p>webpack.config.js:</p>
  
  <pre><code>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
      }
    }
  };
  </code></pre>
  
  <p>and the result of invoking the fetch makes it be called twice, as can be seen here:
  <a href="https://i.stack.imgur.com/2Memj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Memj.png" alt="enter image description here"></a></p>
  
  <p>what am i doing wrong here?</p>