Vue.js使用Axios传参遇500错误及点击异常问题求助

让我们一步步拆解并解决你遇到的这两个问题：

一、500错误+CORS预请求失败问题 #

问题根源分析 #

1. 参数获取不匹配：你前端用axios.post发送JSON格式的参数，但后端用$_GET["bono"]去获取——POST请求的JSON参数根本不在$_GET数组里，这直接导致了"索引未定义"的500错误。
2. 路由/方法名不匹配：前端请求的URL是/contrarBono30Min，但后端方法名是contrarBono30MinHome，如果路由配置时没对应上，会引发重定向，而CORS预请求（OPTIONS）不允许重定向，所以出现了CORS报错。

修复方案 #

1. 修正后端参数获取逻辑（Laravel环境）

// 记得引入Request类
use Illuminate\Http\Request;

public function contrarBono30MinHome(Request $request){
  $usuario = \Auth::user()->id;
  // 从POST的JSON体中获取参数
  $bono = $request->input('bono');
  $precioBono = \DB::select("SELECT precio FROM bonos WHERE codBono = '1'");
  
  // 必须返回响应，否则前端会一直等待
  return response()->json([
    'status' => 'success',
    'precio' => $precioBono
  ]);
}

2. 确保路由与请求URL一致

检查你的路由配置，确保/contrarBono30Min指向的是contrarBono30MinHome方法，避免重定向：

// web.php或api.php
Route::post('/contrarBono30Min', [YourController::class, 'contrarBono30MinHome']);

3. 解决CORS问题

如果是Laravel项目，最便捷的方式是安装CORS中间件：

composer require barryvdh/laravel-cors

然后在app/Http/Kernel.php中注册中间件，确保OPTIONS请求能被正确处理，避免预请求失败。

二、按钮点击无响应/重复请求问题 #

问题根源分析 #

你在Vue的contratar方法里，又用jQuery给按钮绑定了一次click事件：

• 第一次点击按钮时，其实是执行Vue的contratar方法，给按钮绑定了jQuery的点击事件，所以没有实际请求；
• 第二次点击时，会触发Vue的方法（再次绑定jQuery事件）+ 已经绑定的jQuery事件，导致两次请求，而且点击次数越多，绑定的事件越多，请求次数也会翻倍。

修复方案：抛弃jQuery，用Vue的响应式方式处理 #

1. 修改Vue模板，直接传递当前行数据

<tr v-for="data in bonosDisponibles" :key="data.id">
  <td>{{ data.codBono }}</td>
  <td>{{ data.tipo }}</td>
  <td>{{ data.minutos }}</td>
  <td>{{ data.precio }}</td>
  <!-- 点击时直接把当前行的bono数据传给方法 -->
  <td><button class="btn btn-danger contratar" @click="contratar(data)">Contratar</button></td>
</tr>

2. 重写Vue的contratar方法

contratar: function(bonoData){
  let url = '';
  let bonoName = '';

  // 根据codBono判断请求地址和参数
  if(bonoData.codBono == 1){
    url = "/contrarBono30Min";
    bonoName = "Bono30Min";
  }
  // 其他bono类型的判断...

  // 直接发送请求，无需再用jQuery操作DOM
  axios.post(url, { bono: bonoName } )
  .then((response) => { 
    console.log('请求成功:', response); 
  })
  .catch(error => {
    console.error('请求出错:', error);
  });
}

这样修改后，第一次点击就能直接触发请求，也不会出现重复绑定的问题。

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