如何从ColdFusion服务器向Node.js服务器提交HTML表单？

核心问题分析 #

你遇到的Cannot POST /本质上不是CORS的直接问题，而是Node服务器没有配置对应的POST请求路由——当前你只部署了Angular静态页面，但Angular是前端框架，本身无法处理HTTP POST请求，必须依靠Node后端（比如Express）来接收和处理表单提交。而GET请求能成功，是因为GET只是请求Angular的静态页面文件，不需要后端路由匹配。

另外，由于ColdFusion网站和Node服务器属于不同域名，后续确实需要处理CORS跨域问题，否则浏览器会拦截跨域POST请求。

分步解决方案 #

1. 配置Node后端（Express）处理POST路由与CORS

首先需要给Node服务器添加Express后端，用来接收POST请求、处理CORS，并托管Angular静态文件。

步骤1：安装依赖

在Node项目根目录执行：

npm install express cors body-parser

步骤2：编写服务器代码（server.js）

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();

// 配置CORS：允许你的ColdFusion网站域名发起跨域请求
app.use(cors({
  origin: 'https://your-coldfusion-domain.com', // 替换为你的ColdFusion网站实际域名
  credentials: true // 如果需要传递登录Cookie等凭证，必须开启
}));

// 解析POST表单数据（支持urlencoded格式和JSON格式）
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// 处理POST请求的核心路由
app.post('/myapp/new', (req, res) => {
  // 获取ColdFusion表单提交的隐藏字段数据
  const submittedData = req.body.data;
  console.log('接收到的表单数据:', submittedData);

  // 这里可以添加业务逻辑：比如存入数据库、验证数据等

  // 响应方式二选一：
  // 方式1：重定向到Angular首页（适合传统表单提交跳转场景）
  res.redirect('/');
  // 方式2：返回JSON响应（适合AJAX无刷新提交场景）
  // res.json({ success: true, message: '数据接收成功', data: submittedData });
});

// 托管Angular静态文件（替换为你的Angular打包后的dist目录路径）
app.use(express.static(path.join(__dirname, 'dist')));

// 处理Angular单页路由的刷新问题（避免刷新后404）
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

// 启动服务器
const port = 3000;
app.listen(port, () => {
  console.log(`服务器运行在端口 ${port}`);
});

2. 修改ColdFusion表单提交逻辑

根据你的需求，有两种提交方式可选：

方式A：传统表单提交（带页面跳转）

修正表单的action属性，指向Node服务器的POST路由（注意去掉Angular的#路由标识，因为POST请求是发给Node后端，不是前端路由）：

<form id="form1" name="form1" method="post" action="http://your-node-server:3000/myapp/new">
  <!-- 用EncodeForHTMLAttribute处理特殊字符，避免XSS或提交错误 -->
  <input name="data" type="hidden" id="hiddenField" value="<cfoutput>#EncodeForHTMLAttribute(form.data)#</cfoutput>" />
</form>
<script>
document.form1.submit();
</script>

方式B：AJAX无刷新提交（保留登录状态）

如果不想页面跳转，且希望保留用户登录状态，推荐用AJAX提交：

<form id="form1" name="form1">
  <input name="data" type="hidden" id="hiddenField" value="<cfoutput>#EncodeForHTMLAttribute(form.data)#</cfoutput>" />
</form>
<script>
document.getElementById('form1').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认表单跳转
  const formData = new FormData(this);

  fetch('http://your-node-server:3000/myapp/new', {
    method: 'POST',
    body: formData,
    credentials: 'include' // 携带登录Cookie，保留用户状态
  })
  .then(response => {
    if (response.ok) {
      // 提交成功后跳转到Angular页面
      window.location.href = 'http://your-node-server:3000/';
    } else {
      throw new Error('请求失败');
    }
  })
  .catch(error => {
    console.error('表单提交出错:', error);
    // 这里可以添加错误提示逻辑
  });
});

// 自动触发提交
document.getElementById('form1').submit();
</script>

3. Angular端接收数据（可选）

如果需要在Angular页面中展示提交的数据，可以通过两种方式：

• 若用重定向：Node后端重定向时携带查询参数（比如res.redirect('/?data=' + encodeURIComponent(submittedData))），Angular通过$location.search()获取参数。
• 若用AJAX提交：直接在前端接收返回的JSON数据，更新Angular作用域的变量。

关键注意事项 #

• 务必替换代码中的域名、端口、文件路径为你的实际值。
• 如果ColdFusion和Node服务器是同域名或子域名，可以简化CORS配置（比如origin: true）。
• 生产环境中建议开启HTTPS，避免明文传输数据。

内容的提问来源于stack exchange，提问作者J.Bowden11