缘起

其实在提交之前我就发现了，但是当时来不及了，就没管，现在修修（（

具体表现是收不到回调结果，无法执行完成支付的逻辑。（支付成功后，修改订单状态、修改库存）

排查

AliPayController中调起支付宝支付页面的代码如下：

aliPay.setSubject("Test Pay");
                aliPay.setTotalAmount(orderMapper.getPayMoneyById(Integer.parseInt(aliPay.getOrderId())));
                response = Factory.Payment.Page()
                        .pay(aliPay.getSubject(), aliPay.getOrderId(), String.valueOf(aliPay.getTotalAmount()),
                                aliPay.getRedirect());

其中aliPay.getRedirect()由前端传入。

查看response的body：

<form name="punchout_form" method="post" action="https://openapi-sandbox.dl.alipaydev.com/gateway.do?alipay_sdk=alipay-easysdk-java-2.1.2&app_id=9021000131656346&charset=UTF-8&format=json&method=alipay.trade.page.pay&notify_url=http%3A%2F%2F127.0.0.1%3A5173%2F%23%2Fpaycallback&return_url=http%3A%2F%2F127.0.0.1%3A5173%2F%23%2Fpaycallback&sign=dwYqWfor3YLR%2BsO35VWVrCnzVKSWjNoZOs68TMpP9SYtvmtkxKYINnQlQDWR0g7qzJsCkKEtjJgNwQSg%2Bh60c4ppr1JM0ndsH5KzgNBxKH9G7ScybN5FaXgP%2F3jQNRa8jVUx7m%2B2nkKqhLBlgim4CYTsaVo5SOu5bSwSkJNWt9JxSwWuoodILag6lHlMw%2BAY0wDM2YZMDlxYW6eTOOzVGztVyaRMcLHoelRlqFE6yMbcNi3gbkqm18UTbusvb%2BCyaM93Yg7gqS1pm3VLvlRKpBv%2FUavGJEoQhGl478xsCXAG%2BgXpY0aMKNVQML%2FAzO%2FKo1levhAxUuqw0CRoOj%2F0Hw%3D%3D&sign_type=RSA2&timestamp=2024-01-13+20%3A34%3A36&version=1.0">
<input type="hidden" name="biz_content" value="{&quot;out_trade_no&quot;:&quot;31&quot;,&quot;total_amount&quot;:&quot;677.0&quot;,&quot;subject&quot;:&quot;Test Pay&quot;,&quot;product_code&quot;:&quot;FAST_INSTANT_TRADE_PAY&quot;}">
<input type="submit" value="立即支付" style="display:none" >
</form>
<script>document.forms[0].submit();</script>

notify_url为支付宝异步回调地址（回调给后端处理），return_url为完成支付后前端跳转的地址（前端传入）。

很好，都错了（

尝试修改后端application.yml：~~《尝试》~~

alipay:
  // ...
  notifyUrl: http://127.0.0.1:8080/paycallback

以及前端的url：

const backURL = 'http://localhost:5173/#/paycallback'

改完之后，再测测。

然而还是不行，后端还是收不到回调。（此处没图）

用Apifox测一下接口。（没带参数）

能返回错误信息，说明后端接口应该没错的。

此时response的body：

<form name="punchout_form" method="post" action="https://openapi-sandbox.dl.alipaydev.com/gateway.do?alipay_sdk=alipay-easysdk-java-2.1.2&app_id=9021000131656346&charset=UTF-8&format=json&method=alipay.trade.page.pay&notify_url=http%3A%2F%2F127.0.0.1%3A8080%2Fpaycallback&return_url=http%3A%2F%2Flocalhost%3A5173%2F%23%2Fpaycallback&sign=ACrRQgcE5De7Fkx%2FZKEjbS4iM9U%2F3huYlschr5HHd4TZzKSSBB6oY%2FhHkwaIrwRrd1mdsEozMH9hfSO5dtlCRguRw58PNcRpUmvyPPM%2Ftdh3JbM6iAlTeXN05e41Cq7tX0DiQp%2Fg%2BIltBneHLkzTZn2QPA1Ixt9vVJCDCEFuhq8xdSZvEInxva6Zhtp4%2Fwrx5xlRwQHZ5TGgCMMspi0269wZbxtGgtOhe3DuMJFitRZPGSWxj18QodRLuzDP24FsFAAHF1ZUW%2FRUItAhu0SeQj4BhZjjrfF5%2F2230pgvIpsPNr8G5l%2FAZbVlqnyYsn0gcf9A0wiyt2KpLUQTSpBKbg%3D%3D&sign_type=RSA2&timestamp=2024-01-13+20%3A41%3A50&version=1.0">
<input type="hidden" name="biz_content" value="{&quot;out_trade_no&quot;:&quot;33&quot;,&quot;total_amount&quot;:&quot;607.0&quot;,&quot;subject&quot;:&quot;Test Pay&quot;,&quot;product_code&quot;:&quot;FAST_INSTANT_TRADE_PAY&quot;}">
<input type="submit" value="立即支付" style="display:none" >
</form>

那么问题到底在哪里呢？

搜了一堆（过程就略去了）之后，我看到这个评论，有点醍醐灌顶了。

解决

于是修改后端的application.yml里面的notifyUrl以及数据库用户密码：

alipay:
  // ...
  notifyUrl: http://8.138.110.114:8080/paycallback

然后部署到云上（过程略），并且修改前端的baseUrl（在前几篇文章里面有！）

然后再测！

噔噔咚

这里过程就不展开了，总之原因是支付宝那边是不允许订单号重复（商户端）的，然后我这边本地数据库和云端数据库之间有差异，而且订单号是自增的，这样就会导致重复。

改好之后，这下总算ok了！

云端数据库中订单状态成功修改。

前端结果显示成功。

顺便这里还改了一下前端，因为原本的代码里面是利用redirectUrl里面的payResult参数判断，但是这里并没有这个参数，应该是原本的后端处理的，这里就改前端了，因为这个页面启动的时候会首先获取这个订单的数据，所以根据订单数据中的orderState来判断就可以了。

const payResult=ref(0)
const getOrderInfo=async ()=>{
  const res=await getOrderAPI(route.query.out_trade_no)
  orderInfo.value=res.result
  if(res.result.orderState!==1){
    payResult.value=1
  }
}

<span class="iconfont icon-queren2 green" v-if="payResult===1"></span>
      <span class="iconfont icon-shanchu red" v-else></span>
      <p class="tit">支付{{payResult===1?'成功':'失败'}}</p>

参考链接

web页面支付成功没有触发异步回调，查看异常回调也没有显示具体错误信息-支付宝开发者社区 (alipay.com)