日期: 2021年3月23日

  • 排查分析 http 请求响应 500 的过程,jQuery 属性操作 – attr() 方法,设置 src 属性导致

    排查分析 http 请求响应 500 的过程,jQuery 属性操作 – attr() 方法,设置 src 属性导致

    1、上传图片成功之后,GET 请求:https://console.xxx.cn/upload/20210319/20210385015127.png ,响应 500。根源在于上传成功后的图片的域名不是:https://console.xxx.cn ,而是:https://web.xxx.cn 。如图1
    上传图片成功之后,GET 请求:https://console.xxx.cn/upload/20210319/20210385015127.png ,响应 500。根源在于上传成功后的图片的域名不是:https://console.xxx.cn ,而是:https://web.xxx.cn 。
    图1
    2、打开发起程序选项卡,查看请求调用堆栈,在页面的第 516 行执行的 GET 请求。如图2
    打开发起程序选项卡,查看请求调用堆栈,在页面的第 516 行执行的 GET 请求。
    图2
    3、点击进入,JS 代码如下。jQuery 属性操作 – attr() 方法,设置 src 属性。如图3
    点击进入,JS 代码如下。jQuery 属性操作 - attr() 方法,设置 src 属性。
    图3
    
    
    goodsSl.on('uploadSuccess', function (file, json) {
        $('.edit_img_tipthumb').attr("src", json.theUrl);
        $('input[name="data[Product][thumb_img]"]').val(json.theUrl);
    })
    
    
    
    4、json.theUrl 的值:/upload/20210319/20210385015127.png。决定使用绝对地址,添加域名前缀:https://web.xxx.cn 。编辑代码如下
    
    
    goodsSl.on('uploadSuccess', function (file, json) {
        $('.edit_img_tipthumb').attr("src", 'https://web.xxx.cn/creditshop_back' +  json.theUrl);
        $('input[name="data[Product][thumb_img]"]').val(json.theUrl);
    })
    
    
    
    5、上传图片成功之后,GET 请求:https://web.xxx.cn/upload/20210319/20210385015127.png ,响应 200。如图3
    上传图片成功之后,GET 请求:https://web.xxx.cn/upload/20210319/20210385015127.png ,响应 200。
    图3