Vue 使用form表单提交问题

背景：公司的项目对接了一家第三方的支付机构，使用云闪付web移动端支付，对方要求form表单提交信息

1、一开始，使用接口使用Axios请求设置form格式提交

import axios from "axios";  

axios.post(
                  success.data.credential.postParamMap,
                  JSON.parse(success.data.credential.postParamMap),
                  {headers: {'Content-Type':'application/x-www-form-urlencoded'}}
                )
                .then((req) => {
                  console.log(req);
                  // window.location.href = req.url
                },
                (fail) => {
                  that.$toast("支付异常，请选择其他支付方式");
                });


// 接口跨域请求代理
proxyTable: {
      "/v1.1/user_actions/add": {
        target: "https://api.e.qq.com",
        secure: true,
        changeOrigin: true
      },
      "/gateway/api/frontTransReq.do": {
        target: "https://gateway.95516.com",
        secure: true,
        changeOrigin: true
      },
    },

结果行不通，不知道什么原因，后面对方发了一份案列过来

瞬间懵逼，机智的我参照这个，使用vue做了类似的，但是还是遇到了兼容问题，那就是在移动端真机验证的时候，苹果手机下死活不行，问题和解决思路

1、将案例运行到服务器，使用苹果手机打开，可行，说明案例可行，案例代码没问题，是自己的问题

2、试着将案例的数据在自己的页面全部赋值写死，运行发现可行，说明vue环境下可行，是自己代码有问题

3、开始动态赋值，结果发现自己的参数在data中没有定义，这是坑1

4、input框v-model和value不能同时存在，这是坑2

5、一开始使用的cookie存取，最后发现是这个一直不行，原本还以为是cookie存取是异步，数据上有延迟，设置了setTimeout异步处理还是不行

6、最终，使用sessionStorage存取就行了，坑爹的玩意。