跨域场景下post表单与postMessage的使用疑问及Angular数据接收方法

先看你提到的用于跨域跳转的表单代码：

<form action="http://www.aka.com" method="post" target="_blank"> 
  <input name="firstName" type="text"> 
  <button>Test me</button> 
</form>

下面针对你的三个疑问逐一解答：

1. 能否通过上述post表单方法向目标窗口（aka.com）发送数据？ #

当然可以！这个表单本身就是通过POST方法把表单字段（比如这里的firstName）发送到aka.com服务器的，target="_blank"只是让服务器返回的页面在新标签页打开而已。不过要明确：这种方式是HTTP层面的POST请求，和postMessage的机制完全不同——它是浏览器直接把表单数据作为请求体发送给目标服务器，由服务器处理后返回页面；而postMessage是浏览器层面的窗口间实时通信，不需要经过服务器转发。

2. 若aka.com为Angular应用，如何获取发送的数据（如firstName的值）？ #

因为这是HTTP POST请求提交的表单数据，Angular前端本身没办法直接读取请求体里的内容，必须借助后端服务传递数据，常见的两种方式：

• 后端转发数据：如果你的Angular应用是通过Node.js、Java等后端服务托管的，后端可以先接收POST请求里的firstName参数，然后在返回Angular页面时，把这个值通过模板注入（比如在index.html中定义一个全局变量），或者提供一个接口让Angular主动去获取。
• 改用GET方式（不推荐敏感数据）：如果把表单的method改成get，数据会附在URL的参数里，这时Angular可以通过ActivatedRoute来获取参数，但这种方式会把数据暴露在URL中，不适合传递敏感信息。

另外要注意：如果Angular应用是纯静态部署的（没有后端服务），静态服务器只会返回页面文件，不会处理POST请求的请求体，这种情况下前端完全拿不到提交的数据。

3. 是否可以用上述post表单方法替代postMessage？ #

这两者的应用场景完全不同，没办法直接替代：

• post表单：核心是向服务器提交数据并跳转页面，适合一次性的“提交数据+打开目标页面”场景，没办法在两个已经打开的窗口之间实时交换数据。
• postMessage：是浏览器不同窗口/iframe之间的实时通信机制，不需要经过服务器，适合比如父窗口和子iframe之间同步状态、或者两个跨域窗口之间实时传递消息的场景。

举个例子：如果你想在自己的页面操作后，让已经打开的aka.com页面实时更新内容，用postMessage才是正确的选择；但如果你只是想把用户输入的信息提交给aka.com的服务器，然后打开对应的页面，那用表单POST就完全没问题。

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