Axios POST请求无法触发线上Laravel控制器问题排查

本地XAMPP服务器上，Vue.js向Laravel后端上传文件的代码运行完全正常，但部署到线上服务器后，Axios的POST请求返回状态为OK，却未触发Laravel控制器逻辑，也没有任何报错信息，无法定位问题所在。

Vue.js 前端代码 #

const importData = async fileName=> {
    const config = {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    }

    let data = new FormData()
    data.append('file', fileName)
  
    console.log(fileName)
    
    axios.post('/api/importData/', data, config) 
      .then(response => {
        router.push({ name: 'prs' })
        swal({
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 3000,
          timerProgressBar: true,
          icon: "success",
          title: "[ PR ] has been [IMPORTED] successfully  ",
        })
      })
      .catch(function (err) {
        console.log(err)
        swal({
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 3000,
          timerProgressBar: true,
          icon: "error",
          title: err,
        })
      })
  }

Laravel 后端控制器代码 #

function importData(Request $request){
    $this->validate($request, [
        'file' => 'required|file|mimes:xls,xlsx'
    ]);
    $the_file = $request->file('file');

    try{
        ini_set('max_execution_time', 0);
        $the_file = $request->file('file');

        $reader = ReaderEntityFactory::createXLSXReader();
        $reader->open($the_file);

        $data = array();
        foreach ($reader->getSheetIterator() as $sheet) {
            foreach ($sheet->getRowIterator() as $row) {
                $cells = $row->getCells();
                $data[] = [
                    'pr_number'=>$cells[0],
                    'state'=>0,
                    'user_id'=>auth()->id(),
                    'created_at'=> Carbon::now(),
                ];
            }
        }

        $reader->close();
        foreach (array_chunk($data,1000) as $chunk) {
            Prs::insert($chunk);
        }

    } catch (Exception $e) {
        $error_code = $e->errorInfo[1];
        return back()->withErrors('حدث خطأ أثناء عملية التحميل!');
    }
    return back()->withSuccess('تم تحميل البيانات بنجاح.');
}

排查方向及解决方法 #

• 检查路由与服务器配置

  • 确认线上服务器的Web根目录指向Laravel的public文件夹，避免请求被路由到项目根目录导致无法解析。
  • 核对routes/api.php中/importData的路由是否正确绑定到控制器的importData方法，检查是否存在中间件限制（比如auth:sanctum），线上用户是否已通过认证。
  • 检查Nginx/Apache的重写规则是否配置正确，确保所有请求都能转发到Laravel的index.php。

• CSRF令牌验证问题

  • 若前端请求属于Web路由而非API路由，需确保Axios正确携带CSRF令牌。可以在页面头部添加<meta name="csrf-token" content="{{ csrf_token() }}">，并在Axios全局配置中设置：

    axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;
    

  • 若使用API路由，确认app/Http/Middleware/VerifyCsrfToken.php中已将/api/*加入排除列表。

• 文件上传限制

  • 修改线上服务器php.ini的以下配置，确保文件能正常上传：

    upload_max_filesize = 20M
    post_max_size = 20M
    max_execution_time = 300
    

  • 重启Web服务器使配置生效。

• 修正Axios请求头

  • 手动设置Content-Type: multipart/form-data会导致浏览器无法自动添加boundary参数，导致Laravel无法解析FormData。删除请求头配置，让Axios自动处理：

    const config = {
      // 移除Content-Type配置
    }
    

• 查看Laravel日志

  • 检查storage/logs目录下的日志文件，即使前端返回OK，控制器中的异常或路由不匹配问题也会被记录在日志中，这是定位问题的关键。

• 确认FormData传递的文件对象

  • 确保前端的fileName是真实的File对象，而非文件路径或其他类型。可以在console.log(fileName)中查看输出，确认文件的name、size等属性是否存在。

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