MERN Stack（Typesctipt Webpack 设置）发送 axios 请求时总是抛出错误

Question

大家好，我能得到一些帮助吗，所以我有一个 MERN Stack 项目，在前端，我从头开始配置了 Webpack 和 Babel，所以我不知道这是否是我的错误，但每当我发送返回并请求我的节点服务器我总是收到错误消息我可以得到一些帮助我如何破译这个错误

我进入控制台时出错：

Error: Request failed with status code 404
    exports http://localhost:3000/bundle.js:2
    exports http://localhost:3000/bundle.js:2
    onreadystatechange http://localhost:3000/bundle.js:2
    exports http://localhost:3000/bundle.js:2
    exports http://localhost:3000/bundle.js:2
    exports http://localhost:3000/bundle.js:2
    promise callback*7929/l.prototype.request http://localhost:3000/bundle.js:2
    e http://localhost:3000/bundle.js:2
    exports http://localhost:3000/bundle.js:2
    Re http://localhost:3000/bundle.js:2
    Ll http://localhost:3000/bundle.js:2
    unstable_runWithPriority http://localhost:3000/bundle.js:2
    Bo http://localhost:3000/bundle.js:2
    Ol http://localhost:3000/bundle.js:2
    _l http://localhost:3000/bundle.js:2
    U http://localhost:3000/bundle.js:2
    onmessage http://localhost:3000/bundle.js:2
    8794 http://localhost:3000/bundle.js:2
    n http://localhost:3000/bundle.js:2
    7767 http://localhost:3000/bundle.js:2
    n http://localhost:3000/bundle.js:2
    3748 http://localhost:3000/bundle.js:2
    n http://localhost:3000/bundle.js:2
    6116 http://localhost:3000/bundle.js:2
    n http://localhost:3000/bundle.js:2
    <anonymous> http://localhost:3000/bundle.js:2
    <anonymous> http://localhost:3000/bundle.js:2
    <anonymous> http://localhost:3000/bundle.js:2

Webpack 设置：

const path = require("path");
const HtmlPlugins = require("html-webpack-plugin");

module.exports = {
  output: {
    path: path.resolve(__dirname, "public/build"),
    filename: "bundle.[fullhash].js",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: [
          {
            loader: "babel-loader",
          },
        ],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlPlugins({
      filename: "index.html",
      template: "./public/index.html",
    }),
  ],
  devServer: {
    historyApiFallback: true,
    port: 3000,
  },
};

.babelrc 设置：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

tsconfig

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "skipDefaultLibCheck": true,
    "removeComments": true,
    "forceConsistentCasingInFileNames": false,
    "jsx": "react",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "skipLibCheck": false,
    "target": "ES6"
  }
}

NodeJS/Express tsconfig

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": ["src/**/*"]
}

Answer 1

devServer: {
    historyApiFallback: true,
    port: 3000,
},

您必须指定 contentBase。

devServer: {
    historyApiFallback: true,
    port: 3000,
    contentBase: path.join(__dirname, 'dist'),
},

所以 wehpack 开发服务器将提供 dist 目录中的所有文件。这将解决当前错误，但随后您将收到另一个错误，因为您在 webpack.config.js

中没有 entry 属性

 entry:"src/app.js" // path to main file of your app

MERN Stack（Typesctipt Webpack 设置）发送 axios 请求时总是抛出错误

MERN Stack(Typesctipt Webpack setup) Always throwing error when I send axios request

node.js

typescript

reactjs

webpack

mern