axios POST请求失效：点击按钮触发GET请求而非POST请求

嘿，我一眼就发现问题所在了——你的前端脚本根本没被执行！看你的startQuiz.ejs代码，你把axios的CDN引入和自定义的表单监听脚本放在了同一个<script>标签里。当<script>标签带有src属性时，浏览器会优先加载外部的axios脚本，标签内部的代码会被直接忽略，所以你的event.preventDefault()根本没生效，表单就以默认的GET方式提交了。

下面是具体的修复步骤：

1. 拆分Script标签（核心修复） #

把axios的引入和你的自定义脚本分成两个独立的<script>标签，这样自定义代码才能被正常执行：

<%- include('./partial/header.ejs'); %>
<form id='abcd'>
<button type="submit">Go</button>
</form>
<!-- 单独引入axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" crossorigin="anonymous"></script>
<!-- 自定义脚本放在独立标签里 -->
<script>
const form = document.querySelector('#abcd');
form.addEventListener('submit', async(event) => {
  event.preventDefault();
  console.log('Log here');
  try {
    await axios({
      method: 'post',
      url: '/startQuiz',
      data: {
        firstName: 'Fred',
      },
    });
  } catch (e) {
    console.log(e);
  }
});
</script>
<%- include('./partial/footer.ejs'); %>

2. 可选优化：给表单指定POST方法 #

虽然event.preventDefault()会阻止默认行为，但给表单加上method="POST"会让代码更清晰，也符合语义化规范：

<form id='abcd' method="POST">
<button type="submit">Go</button>
</form>

3. 验证修复效果 #

修改后打开浏览器的开发者工具→Console面板，点击Go按钮，如果能看到Log here的输出，说明脚本已经正常工作，此时浏览器应该会发起POST请求而不是GET了。

额外排查（如果修复后仍有问题） #

• 检查Console面板是否有报错，比如axios is not defined——如果是CDN加载失败，可以换一个axios的CDN地址，或者本地引入axios文件。
• 确认你的Express路由配置正确（从你的代码看startQuiz.js里的POST路由没问题）。
• 检查index.js里的express.json()和body-parser配置，确保能正确解析POST请求的JSON数据（你的配置是对的）。

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