Question

作为我正在做的项目的一部分，我用Java编写了spring框架应用服务器。我现在想使用webpack使用JavaScript为其编写客户端。在我的一个文件中，我用POST方法调用fetch，但是由于某种原因，它被调用了两次，并且我的服务器抛出了异常（因为它试图将具有相同键的相同对象放入数据库中）我认为这与CORS有关，因此我启用了从该网站上找到的源向Web服务器添加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

可能是由于束路径错误而导致尝试使用path.resolve（“ your output directrory”）

findPath()

Answer 2

您似乎正在使用自定义的HtmlWebpackPlugin模板-您是否有机会在该./bundle.js中指向src/index.html的脚本标签？

HtmlWebpackPlugin旨在自动为您添加捆绑脚本。看截图，我猜VM....bundle.js是webpack-dev-server从内存中获取的那个，而第二个bunde.js是您在上一个webpack build中本地创建的那个。

使用“ POST”方法的JavaScript Fetch被调用了两次

2 个答案: