Webpack+Node.js环境下script标签调用外部JS接口的问题求助

我是Node.js、Webpack和JavaScript新手，项目基于这两个工具，结构如下：

-dist
-node_modules
-public
--test.png
-routes
--web
---usage.html
--api
---testapi.js
-src
--app.js
-index.html
-package-lock.json
-package.json
-webpack.config.js

webpack.config.js 配置 #

module.exports = {
mode: 'development',
  target: "node",
  entry: {
    main: './src/app.js',
  },

output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  resolve: {
    extensions: [".js", ".jsx", ".json", ".css"]
  },

 module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      //other rules
    ]
  },
 devServer: {
    client: {
      overlay: true
    },
    hot: true,
    watchFiles: ['src/*', 'index.html'],
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    }
  },

  plugins: [
    new CopyWebpackPlugin({
      patterns: ['index.html']
    }),
    new HtmlWebpackPlugin({
      filename: 'usage.html',
      template: 'routes/web/usage.html',
    }),
  //other plugins
  ]
};

testapi.js 接口逻辑 #

const axios = require('axios');
var temp;

const config = {
    //some_config
};

axios.get(some_url, config)
    .then(async result => {
        temp = result.data;
        console.log("Results: " + JSON.stringify(temp))
    })
    .catch(error => {
        console.log(error)
    });

usage.html 调用代码 #

//other scripts
<script>
      $(document).ready(function () {
          $.getScript("testapi.js", async function (result) {
             //some logic goes here
       });
    </script>
//body follows

package.json 配置 #

{
    "name": //some_app_name,
    "version": "1.0.0",
    "description": //some_desc,
    "dependencies": {
        "@babel/core": "^7.18.13",
        "async": "^3.2.4",
        "aws-amplify": "latest",
        "axios": "^0.27.2",
        "express": "^4.18.1",
        "html-webpack-plugin": "^5.5.0",
        "node-fetch": "^2.6.7"
    },
    "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^8.2.5",
        "babel-preset-env": "^1.7.0",
        "babel-preset-es2016": "^6.24.1",
        "clean-webpack-plugin": "^4.0.0",
        "copy-webpack-plugin": "^6.4.1",
        "extract-loader": "^5.1.0",
        "file-loader": "^6.2.0",
        "html-loader": "^4.1.0",
        "html-webpack-partials-plugin": "^0.8.0",
        "url-loader": "^4.1.1",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.9.1",
        "webpack-dev-server": "^4.4.0"
    },
    "scripts": {
        "dev": "webpack-dev-server",
        "build": "webpack",
        "prestart": "npm run build",
        "start": "webpack && webpack-dev-server --mode development"
    }
}

我尝试过这些方案但都没解决：

• 将testapi.js添加为Webpack入口：接口在控制台被调用但有CORS问题，而且不知道怎么在usage.html里用返回结果
• 用CopyWebpackPlugin复制testapi.js：加载usage.html时，Network标签里只显示原始代码，看不到接口响应
• 在usage.html里用$.get替代$.getScript
• 将testapi.js移到src目录并修改相关配置

解决方案 #

核心问题分析 #

当前问题根源有两个：

1. CORS限制：浏览器会阻止前端直接请求非同源外部接口，devServer中配置的CORS头仅作用于webpack-dev-server自身接口，与外部接口无关
2. 运行环境混淆：testapi.js使用的require是Node.js语法，直接在浏览器中运行会报错；且Webpack的target设为node，打包产物是面向Node.js环境的，无法在浏览器正常执行

步骤1：调整Webpack配置适配浏览器环境 #

将target字段改为web（或直接删除，web是默认值），并将testapi.js加入入口：

module.exports = {
  mode: 'development',
  target: "web", // 修改为web环境
  entry: {
    main: './src/app.js',
    testapi: './routes/api/testapi.js' // 新增testapi入口
  },
  // 其余配置保持不变
};

步骤2：改造testapi.js为浏览器兼容模块 #

替换Node.js语法为ES模块规范，将接口调用封装为可导出的异步函数，方便前端获取返回结果：

import axios from 'axios';

const config = {
    // 你的接口配置
};

export async function fetchExternalData() {
  try {
    const result = await axios.get(some_url, config);
    console.log("Results: " + JSON.stringify(result.data));
    return result.data;
  } catch (error) {
    console.error(error);
    throw error;
  }
}

步骤3：通过Webpack Dev Server代理解决CORS问题 #

在devServer中添加代理配置，将前端请求转发到外部接口，绕过浏览器的同源限制：

devServer: {
  // 原有配置不变
  proxy: {
    '/external-api': {
      target: 'https://你的外部接口域名', // 替换为实际外部接口域名
      changeOrigin: true,
      pathRewrite: { '^/external-api': '' } // 如果外部接口无此前缀，用于移除路径中的代理标识
    }
  }
}

同时修改testapi.js中的请求URL，改为代理路径：

const result = await axios.get('/external-api/你的接口路径', config);

步骤4：在usage.html中正确调用接口 #

确保testapi的打包产物被引入，然后调用导出的异步函数获取数据：

<script src="testapi.bundle.js"></script>
<script>
  $(document).ready(async function () {
    try {
      const apiData = await fetchExternalData();
      // 在这里处理接口返回的数据
      console.log(apiData);
    } catch (err) {
      console.error('接口请求失败:', err);
    }
  });
</script>

步骤5：验证运行 #

执行npm run dev启动开发服务器，打开usage.html，检查控制台是否正常打印接口数据，且无CORS报错。

内容的提问来源于stack exchange，提问作者Deepak