使用form标签避免跨域

情景描述

• 最近做支付遇到需求是：

  • 用户点击支付
  • 发起请求获取跳转第三方支付需要的数据
  • 然后跳转新的tab是第三方支付界面

• 对于用户而言

  • 发起支付
  • 看到跳出新的tab是第三方支付平台

• 总结功能

  • 发送支付请求
  • 跳转

• block点

  • 直接在浏览器输入第三方网站的url发现总是报出请求体为空的错误
  • 考虑如何在跳转的时候带上请求体呢？
  • 知道没有办法在浏览器跳转的时候带上header或者body，那么该如何处理呢？
  • 不知道第三方支付平台的服务器怎么写的，服务器是如何接受我在请求体中带的支付信息，然后跳转

思考

• Q1:发现可以使用form表单实现这个功能，如何实现？
• A1: 实现过程
  • 每当用户点击支付
  • 向本系统支付接口发送请求获取支付信息， 以及第三方支付平台的路径
  • 将支付信息填入到一个form表单，设置input的type为hidden然后action的值是第三方支付平台的路径并且将form表单的提交方式设置为post
  • 然后出发表单提交

---

• Q2:思考form表当到底是如何工作，可以实现发送请求并自动跳转呢？（而且做到了带上body跳转）
• A2:经过研究发现：我一直以为form表单是带上body跳转的思想完全错误
  • form表单点击submit触发向某个接口发送post请求
  • 这个接口接受了post请求的内容然后处理
  • 接着send redirect状态码302在header中带上location回浏览器
  • 浏览器一旦接收302的response直接做重定向
  • ajax等到重定向结束后收到302状态码的response

---

• Q3:那么第三方支付平台的服务器又是怎么写的呢？
• A3:接收post请求，处理支付信息，然后给出一个重定向路径加入header的location中，返回302

---

• Q4:那么我除了可以使用form表单解决这个问题，可以使用发送ajax请求想第三方支付平台吗?
• A4:我觉得是可以的
  • 直接发送ajax的post请求去form表单的action路径
  • 然后浏览器直接重定向即可

  • 然而直接发送ajax请求发生了跨域问题，浏览器的跨域问题

    • 第三方支付平台不允许我们的系统发送跨域请求给他，也就是说第三方支付平台给我们返回的响应体被浏览器拦截了
    • 因此使用ajax发送post请求除非能够修改第三方支付平台的服务器返回的响应体否则无法使用这个方式

---

• A5:对于我们而言，我们只做了触发form的提交事件，并且从未定义过form表单的提交事件，那么为什么form表单会自己做出这么多的事情呢？
• Q5:这就是form表单提交的默认事件（以前很痛恨的默认事件总是使用e.preventDeafult()给阻止了）
  • form表单的默认行为
    • 只要表单元素中有获得过焦点的input（单行文本）一旦用户触发回车就会立刻自动提交表单
    • form表单提供submit方法和reset方法可以使用js代码直接调用实现submit和清空表单元素内容的作用（被动触发）
    • 一旦form元素中包含button 或者type是submit的input一旦被点击一定会触发submit事件（用户主动触发）
  • 用户触发submit或者js触发submit会默认执行的行为
    • 将form表单拥有name和value的元素打包成一个key value的形式的对象
    • 然后触发ajax请求
      • 将对象作为request body
      • 使用form method的方式发送请求
      • 将action的值作为请求发送的地址
    • 判断form的target的值
      • self：什么都不做
      • black：window.open一个新的tab做响应的redirect tab

解决

• 在当前的界面创建表单
• 将支付信息填充在form表单的input（type=hidden) 元素中
• 然后用户点击支付button
• 通过ref获取form标签
• 然后调用form的submit方法

遗留问题

• 发现safira无法跳转第三方支付平台
  • 只有设置取消safira的禁止popup才能够跳转
    • 下一篇详细介绍
• 第三方支付平台的跨域问题有没有解决方案
  • 下一篇介绍跨问题原理以及解决方案