HTML表单提交至Angular站点抛出‘Cannot POST /’错误的解决求助

让我们一步步拆解你的问题，先搞定最头疼的POST请求报错，再聊聊路由的选择。

为什么直接访问正常，POST提交却报错？ #

这里有个很容易忽略的细节：表单action里的#（锚点）不会被浏览器发送到服务器。也就是说，你写的action="myAngularApp/#/myapp/new"，实际发送给Node服务器的请求路径是根路径/，而不是/myapp/new——#/myapp/new是留给Angular前端路由处理的，服务器根本看不到。

直接访问链接时，浏览器发送的是GET /请求，你的Node服务器应该配置了返回index.html，然后Angular加载后读取锚点里的路由，正常渲染页面。但POST请求到/时，你的Node服务器没有对应的POST路由处理逻辑，所以就返回了Cannot POST /错误。

如何让POST请求正常工作？ #

有两个靠谱的方案，你可以根据场景选择：

方案1：修改Node服务器处理POST请求 #

既然POST请求实际是发到了/，那你只需要让Node服务器在收到POST请求到/时，和GET请求一样返回index.html。比如用原生Node HTTP服务器的话，可以这么写：

const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
  // 不管是GET还是POST到根路径，都返回index.html
  if (req.url === '/' && (req.method === 'GET' || req.method === 'POST')) {
    fs.readFile(path.join(__dirname, 'index.html'), (err, data) => {
      if (err) {
        res.writeHead(500);
        return res.end('Error loading index.html');
      }
      res.writeHead(200, {'Content-Type': 'text/html'});
      res.end(data);
    });
  }
  // 其他静态资源的处理逻辑...
});

server.listen(3000);

不过这里有个小问题：页面刷新后，Angular怎么获取POST的表单数据？因为SPA刷新后默认无法直接读取POST请求体。你可以在Node服务器里把POST数据存入session或cookie，然后Angular初始化时从session/cookie里读取数据，用完再清理。

方案2：跳过表单提交，用JS跳转+本地存储传数据 #

这个方案更简单，完全避开服务器处理POST的麻烦：把ColdFusion的form.data存入浏览器的localStorage或sessionStorage，然后直接跳转到Angular页面，最后在Angular组件里读取数据。

替换你原来的表单和脚本：

<script>
// 把数据存入sessionStorage（关闭窗口就自动清除，更安全）
sessionStorage.setItem('transferData', '<cfoutput>#form.data#</cfoutput>');
// 跳转到Angular页面
window.location.href = 'myAngularApp/#/myapp/new';
</script>

然后在Angular的myapp/new页面组件里读取数据：

// Angular 4+ 组件示例
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-myapp-new',
  templateUrl: './myapp-new.component.html'
})
export class MyappNewComponent implements OnInit {
  transferData: string;

  ngOnInit() {
    // 读取sessionStorage里的数据
    this.transferData = sessionStorage.getItem('transferData');
    // 用完立即清除，避免残留
    sessionStorage.removeItem('transferData');
  }
}

如果是AngularJS 1.6的部分，读取方式类似：

angular.module('myApp').controller('MyAppNewCtrl', function($scope) {
  $scope.transferData = sessionStorage.getItem('transferData');
  sessionStorage.removeItem('transferData');
});

这个方案还能解决GET请求重定向登录丢失参数的问题，因为本地存储的数据不会因为页面重定向而丢失。

关于混合应用的路由选择 #

你的应用是Angular 4.4 + AngularJS 1.6的混合应用，路由选择要看你的架构：

• 如果是AngularJS 1.6主导路由，用angular-route（ngRoute）或者更灵活的ui-router；
• 如果是Angular 4+主导路由，用官方的@angular/router；
• 混合应用需要用@angular/upgrade模块来整合两者的路由，确保路由切换时能正确加载对应的AngularJS或Angular组件。不过你当前的问题和路由本身无关，先解决表单提交的问题，再考虑路由的整合也不迟。

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