非模块环境使用import语句触发Uncaught SyntaxError：如何从HTML获取输入并通过POST请求获取JWT Token？

兄弟，你这问题核心是把后端Node.js代码和浏览器前端代码混在一起写了，难怪会触发这个语法错误！我给你拆解清楚问题，再一步步帮你搞定从HTML获取输入并拿到JWT Token的需求。

先说说错误原因 #

你遇到的Uncaught SyntaxError: Cannot use import statement outside a module，本质是两个问题叠加：

1. 环境混淆：express、后端版axios都是只能在Node.js环境跑的代码，你把它们和操作DOM的前端代码写在一个文件里，浏览器根本识别不了这些后端依赖；
2. 模块未声明：就算是纯前端代码，浏览器默认也不支持ES模块的import语法，得把脚本标记为type="module"——但这不是你现在的核心问题，毕竟后端代码本来就不该出现在前端文件里。

第一步：拆分后端服务（Node.js） #

先写一个单独的后端文件（比如server.js），负责对接第三方API，帮前端转发请求获取Token：

import express from "express";
import axios from 'axios';
import cors from 'cors'; // 解决跨域问题，需要先安装：npm install cors

const app = express();
const PORT = 5000;

// 配置中间件
app.use(cors()); // 允许前端跨域请求
app.use(express.json()); // 解析JSON格式的请求体

// 定义登录接口，接收前端传来的账号密码
app.post('/api/login', async (req, res) => {
  const { login, senha } = req.body;
  try {
    // 调用第三方API获取Token
    const response = await axios('你的第三方API地址', {
      method: 'POST',
      headers: { "Content-Type": 'application/json'},
      auth: {
        username: login,
        password: senha,
      },
    });
    const token = response.data;
    console.log('后端获取到Token:', token);
    res.json({ token }); // 将Token返回给前端
  } catch(error) {
    console.error('登录请求失败:', error);
    res.status(401).json({ error: '登录失败，请检查账号密码' });
  }
});

// 启动服务器
app.listen(PORT, () => console.log("服务器已启动在端口 %s", PORT));

第二步：编写前端页面与交互 #

创建index.html，负责展示表单、收集用户输入，然后请求我们自己的后端接口：

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>登录获取JWT Token</title>
</head>
<body>
  <div style="margin: 20px;">
    <label for="login">账号:</label>
    <input type="text" id="login" placeholder="请输入账号" style="margin-left: 10px;">
  </div>
  <div style="margin: 20px;">
    <label for="senha">密码:</label>
    <input type="password" id="senha" placeholder="请输入密码" style="margin-left: 10px;">
  </div>
  <button id="submitBtn" style="margin: 20px;">登录获取Token</button>

  <!-- 前端脚本，标记为module支持ES语法 -->
  <script type="module">
    // 获取DOM元素
    const loginInput = document.querySelector('#login');
    const senhaInput = document.querySelector('#senha');
    const submitBtn = document.querySelector('#submitBtn');

    // 监听登录按钮点击事件
    submitBtn.addEventListener('click', async () => {
      const login = loginInput.value.trim();
      const senha = senhaInput.value.trim();

      // 校验输入
      if (!login || !senha) {
        alert('请填写完整的账号和密码！');
        return;
      }

      try {
        // 请求自己的后端接口
        const response = await fetch('http://localhost:5000/api/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ login, senha }),
        });

        if (!response.ok) {
          throw new Error('登录请求失败');
        }

        const data = await response.json();
        console.log('前端拿到的Token:', data.token);
        // 这里可以把Token存在localStorage，用于后续接口请求
        alert('登录成功！Token已打印在控制台');
      } catch (error) {
        console.error('请求出错:', error);
        alert('登录失败，请检查账号密码或网络连接');
      }
    });
  </script>
</body>
</html>

第三步：运行项目 #

1. 先安装后端依赖：

npm install express axios cors

2. 启动后端服务：

node server.js

3. 直接打开index.html页面（或者用VS Code的Live Server插件打开），输入账号密码点击登录，就能成功获取Token了！

额外提醒 #

为什么要通过后端转发请求？因为如果前端直接调用第三方API，大概率会遇到跨域问题（CORS），浏览器会直接阻止这种跨域请求。通过自己的后端代理，既能避开跨域限制，还能避免账号密码暴露在前端代码里，更安全。

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