Paystack回调方法内Axios post请求未触发 Vue+Laravel集成场景求助

问题根源排查&解决方案 #

1. 优先解决this指向丢失问题

vue-paystack 触发回调时会重置函数执行上下文，导致方法内的this不再指向Vue实例，this.api取值为undefined，请求路径错误直接静默失败，你可以通过两种方式修复：

• 方式1：将回调方法定义为箭头函数，固定this指向

// methods 内的定义改为箭头函数
methods: {
  saveResponse: (resp) => {
    // 可先打印确认路径是否正确
    console.log('请求地址', this.api + `/store_response`)
    axios.post(this.api + `/store_response`, {
      resp: resp
    }).then((res)=>{
       console.log(res.data)
    }).catch(err => {
       // 新增错误捕获，可直接看到报错原因（路径错误/跨域/CSRF校验失败等）
       console.error('请求失败原因：', err)
    })
  }
}

• 方式2：在组件绑定回调时手动绑定this

<paystack
    :amount="amount"
    :email="email"
    :paystackkey="paystackkey"
    :reference="reference"
    :callback="saveResponse.bind(this)" <!-- 新增 bind 绑定 Vue 实例 -->
    :close="close"
    :embed="false"
>
   <i class="fas fa-money-bill-alt"></i>
   Make Payment
</paystack>

2. 后端接口校验配置

如果修复指向问题后请求仍报错，按以下顺序排查：

• 确认Laravel端/store_response路由为POST类型，且路径和你拼接的this.api + /store_response完全匹配
• 跨域校验：如果前后端端口/域名不同，需要在Laravel端配置CORS允许前端域名访问
• CSRF校验：Laravel默认校验POST请求的CSRF令牌，你可以要么在axios全局配置X-CSRF-TOKEN请求头，要么将/store_response路由添加到App\Http\Middleware\VerifyCsrfToken的$except排除列表中

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