没有不值得去解决的问题,也没有不值得去学习的技术!

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

打开发起程序选项卡,查看请求调用堆栈,在页面的第 516 行执行的 GET 请求。

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
JavaScript

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 。编辑代码如下

JavaScript

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

关于作者 · 持续学习与技术实践

我是一名拥有 15 年以上开发经验的技术从业者,自 2013 年起持续运营个人技术博客,记录工作与个人项目中遇到的真实问题,以及解决问题过程中的探索、实践和思考。

除了技术写作,我也在持续开发和维护自己的独立项目,探索新技术和新工具在实际场景中的应用。我始终相信,没有不值得去解决的问题,也没有不值得去学习的技术。

如果这篇文章对你有所帮助,欢迎浏览博客中的其他文章,也欢迎交流技术经验与想法。

关于我  ·  GitHub  ·  邮件联系