这个问题可能涉及多个因素，以下是一些可能的原因和解决方案：跨域资源共享（CORS）限制：线上环境可能会受到CORS策略的限制，导致无法访问百度的URL。而本地环境可能没有这样的限制。解决方案：在服务器端设置合适的CORS头部信息，允许跨域请求。网络安全策略：百度可能会对某些请求进行限制，例如基于IP地址或User-Agent的限制。解决方案：检查线上环境的网络设置，确保请求符合百度的安全策略。DN

本文分析了HTML代码在本地能正常显示百度图片，但线上环境却无法显示的问题。 该问题可能并非代码错误，而是由于线上环境的CORS限制、网络安全策略、DNS解析问题、防火墙或代理设置、SSL/TLS证书问题或代码部署差异等多种因素导致。 文章探讨了百度图片服务器的防盗链机制，并提出了几种可能的解决方案，包括移除URL中的token参数、本地缓存图片以及使用CDN等，但同时强调了尊重版权的重要性，建议用户优先选择合法合规的图片使用方式。 最终解决问题需结合浏览器开发者工具排查具体错误信息。

问题描述：

为什么相同的HTML代码，在线上无法显示百度图片链接，但在本地却可以正常显示？

本文探讨一个常见的网页显示问题：一段HTML代码在本地环境下可以正常显示百度图片，但部署到线上环境后却无法显示。代码片段如下：

<tr class="ant-table-row ant-table-row-level-0" data-row-key="157941061"><td class="ant-table-cell">
        276b206633e200641d3f9ddabc657888</td>
    <td class="ant-table-cell">image</td>
    <td class="ant-table-cell">
        <div> ✅ </div>
    </td>
    <td class="ant-table-cell">
        <div>
            <div>
                <div class="ant-image ant-image-error" style="width: 200px;"><img  class="ant-image-img" src="/uploads/20250321/174256112567dd5f653bf41.jpg" alt="这个问题可能涉及多个因素，以下是一些可能的原因和解决方案：跨域资源共享（CORS）限制：线上环境可能会受到CORS策略的限制，导致无法访问百度的URL。而本地环境可能没有这样的限制。解决方案：在服务器端设置合适的CORS头部信息，允许跨域请求。网络安全策略：百度可能会对某些请求进行限制，例如基于IP地址或User-Agent的限制。解决方案：检查线上环境的网络设置，确保请求符合百度的安全策略。DN" ></div>
            </div>
        </div>
    </td>
</tr>

用户尝试关闭浏览器拦截器（包括内容拦截和Cookie拦截），但问题依旧存在。这引发了对浏览器拦截、百度服务器拦截，以及图片链接与Cookie关联性的疑问。

问题分析：

问题的根源在于百度图片服务器的防盗链机制。 许多图片托管平台为了保护版权，会通过检查请求来源（例如Referer头部信息或URL中的token）来验证请求的合法性。 线上环境下，服务器可能无法识别请求的来源，或者识别到请求并非来自授权的网站，从而拒绝访问。 而本地环境下，因为图片请求直接来自本地文件，绕过了防盗链机制的验证。

解决方案建议：

虽然直接绕过防盗链机制并不推荐，但为了解决此问题，可以考虑以下几种方法（不保证所有方法都能有效，且需谨慎使用）：

• 移除token参数: 尝试从图片URL中移除@f_auto?token=9239a3fdc3e8e54f5cfb422db8ce1578部分，但这并不能保证一定成功，因为防盗链机制可能采用其他验证方式。

• 本地缓存: 将图片下载到本地，然后使用本地路径引用图片。 此方法适合少量图片，不适用于大规模图片处理。

• 使用CDN或其他图片托管服务: 将图片上传到不启用严格防盗链机制的CDN或其他图片托管服务，然后使用新的图片链接。

再次强调，尊重版权至关重要。 本文仅分析问题原因及提供可能的解决思路，并不鼓励绕过防盗链机制。 建议用户优先选择合法合规的图片使用方式。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~