集成SignaturePad签名提交数据时触发302错误，请求排查解决

我基于SignaturePad实现了签名功能，点击保存按钮时能正常获取签名的base64编码并存入隐藏输入框，但提交数据时触发了302错误。以下是基于Yii框架编写的相关代码，请求排查错误原因。

控制器代码 #

public function actionSignaturesave()
{
    if (Yii::$app->request->post('case_id') != '') {

        $case_id = Yii::$app->request->post('case_id', '');
        $signatureData = Yii::$app->request->post('signature_image');

            if($signatureData != "")
            {
                $signatureData = 'data:image/png;base64,'.$signatureData;
                $filePath = Yii::$app->params['uploadpath'].'casesignature'.'/'.  $model->case_id.'.png';
                file_put_contents($filePath, file_get_contents($signatureData));
                $urlatt = Yii::$app->urlManagerApi->createAbsoluteUrl('common/addmedia');
                $newthumb = 0; 
                $tempname = $filePath;
                $filetype = $this->commonModel->getFileTypeWithExtension($tempname);
                $allowExtenssion = ["jpg","jpeg","png","gif","JPG","JPEG","PNG","GIF"];
                if (in_array($filetype['extension'], $allowExtenssion) || count($allowExtenssion) == 0) {
                    $paramsatt = array(
                        "unitId" => @Yii::$app->session->get('user.unitId'),
                        "Title" => 'Signature Attachment Image',
                        "extension" => $filetype['extension'],
                        "ref_table" => 118,
                        "ref_id" =>   $model->case_id,
                        "file_type" => $filetype['type'],
                        "link" => "",
                        "isthumb" => $newthumb,
                        "is_external_link" => 0,
                    );
                    $resp = $this->commonModel->callApi($urlatt, $paramsatt, $tempname);
                }
               
            }
            return $this->redirect('casedetail');
            
    } else {
        echo $this->functionModel->_jsonencode(['Status' => 500, 'Message' => \Yii::t('frontend', "something_went_wrong")]);
    }
}

视图代码 #

<?php
$form = ActiveForm::begin(['action' => Url::to(['defect/inspectionadd']), 'options' => ['id' => 'defect-inspection-add-form']]);
?>
<div>
     <ul>
 <?php if($model->case_status == 4)
                                            {
                                                ?>
                                                <li>
                                                    <p class="SigCenter"><?= \Yii::t("frontend", 'Signature'); ?></p>
                                                        <div id="builder">
                                                            <canvas id="signature" width="450"  style="border: 1px solid #ddd;align:left;"></canvas><br>
                                                            <input type="hidden" id='signature_image' name="signature_image" value=""> 
                                                            <?php //echo Html::input('submit','save-signature', \Yii::t('frontend','Save'), ['id' => 'save-signature', 'class'=>'save-signature']); ?>
                                                            <center><button id="save-signature" class="SaveBtn">Save</button>
                                                            <button id="clear-signature" class="ClearBtn">Clear</button></center>
                                                        </div>
                                                </li>
                                            <?php } ?>
</ul>
  <?php ActiveForm::end(); ?>
                                </div>
$this->registerJs("
 jQuery(document).ready(function($){        
        var canvas = document.getElementById('signature');
        var signaturePad = new SignaturePad(canvas);
        
        $('#save-signature').on('click', function(e){
            e.preventDefault();
            var Sigimage=signaturePad.toDataURL();
            // console.log(Sigimage);
            document.getElementsByName('signature_image')[0].setAttribute('value', Sigimage);
   
            signaturePad.clear();
        });

        $('#clear-signature').on('click', function(e){
            e.preventDefault();
            signaturePad.clear();
        });
        
    });

    $(document).on('click', '#save-signature', function(){
        var params = new Object();        
        params.case_id = '" . $model->case_id . "';
        params.image =  document.getElementsByName('signature_image').value;
        $.ajax({
            type : 'POST',
            url  :  '" . Yii::$app->urlManager->createUrl('case/signaturesave') . "',
            data :  params, 
            success : function(data) {
                data = JSON.parse(data);
                if(data.Status != 200)
                {
                    iplus.alert(data.Message);
                    return false;
                }
        }
    });
        return false;
    });
");

302错误原因排查及修复方案 #

核心原因 #

1. AJAX请求返回重定向：控制器处理完请求后执行return $this->redirect('casedetail');，AJAX无法识别302重定向响应，直接触发错误。
2. 参数名不匹配：前端AJAX传递params.image，但控制器接收signature_image，导致签名数据无法正确获取。
3. 重复绑定点击事件：保存按钮被绑定了两次点击事件，可能引发逻辑冲突。
4. base64数据处理错误：signaturePad.toDataURL()已返回带前缀的base64字符串，控制器重复添加前缀会导致file_get_contents解析失败。
5. 未初始化模型：控制器中直接使用$model->case_id但未初始化$model，会触发PHP错误。

修复步骤 #

1. 修改控制器适配AJAX请求

public function actionSignaturesave()
{
    if (Yii::$app->request->post('case_id') != '') {
        $case_id = Yii::$app->request->post('case_id', '');
        $signatureData = Yii::$app->request->post('image'); 

        if($signatureData != "")
        {
            // 解析base64数据，去掉前缀后解码
            list(, $data) = explode(',', $signatureData);
            $data = base64_decode($data);
            $filePath = Yii::$app->params['uploadpath'].'casesignature'.'/'.  $case_id.'.png';
            file_put_contents($filePath, $data);
            
            $urlatt = Yii::$app->urlManagerApi->createAbsoluteUrl('common/addmedia');
            $newthumb = 0; 
            $tempname = $filePath;
            $filetype = $this->commonModel->getFileTypeWithExtension($tempname);
            $allowExtenssion = ["jpg","jpeg","png","gif","JPG","JPEG","PNG","GIF"];
            if (in_array($filetype['extension'], $allowExtenssion) || count($allowExtenssion) == 0) {
                $paramsatt = array(
                    "unitId" => @Yii::$app->session->get('user.unitId'),
                    "Title" => 'Signature Attachment Image',
                    "extension" => $filetype['extension'],
                    "ref_table" => 118,
                    "ref_id" =>   $case_id,
                    "file_type" => $filetype['type'],
                    "link" => "",
                    "isthumb" => $newthumb,
                    "is_external_link" => 0,
                );
                $resp = $this->commonModel->callApi($urlatt, $paramsatt, $tempname);
            }
        }
        // 返回JSON响应而非重定向
        return $this->asJson(['Status' => 200, 'Message' => '签名保存成功']);
    } else {
        return $this->asJson(['Status' => 500, 'Message' => \Yii::t('frontend', "something_went_wrong")]);
    }
}

2. 修复前端AJAX代码

$this->registerJs("
 jQuery(document).ready(function($){        
        var canvas = document.getElementById('signature');
        var signaturePad = new SignaturePad(canvas);
        
        $('#save-signature').on('click', function(e){
            e.preventDefault();
            var Sigimage = signaturePad.toDataURL();
            if (!Sigimage) {
                iplus.alert('请先签署签名');
                return;
            }
            
            var params = {
                case_id: '" . $model->case_id . "',
                image: Sigimage
            };
            
            $.ajax({
                type : 'POST',
                url  :  '" . Yii::$app->urlManager->createUrl('case/signaturesave') . "',
                data :  params, 
                dataType: 'json',
                success : function(data) {
                    if(data.Status != 200)
                    {
                        iplus.alert(data.Message);
                        return false;
                    }
                    // 保存成功后手动跳转详情页
                    window.location.href = '" . Yii::$app->urlManager->createUrl('case/casedetail') . "';
                },
                error: function(xhr) {
                    iplus.alert('请求失败，请稍后重试');
                }
            });
            
            signaturePad.clear();
        });

        $('#clear-signature').on('click', function(e){
            e.preventDefault();
            signaturePad.clear();
        });
    });
");

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