Ajax 在 Firefox 中失败 - 适用于所有其他浏览器答案

【问题标题】：Ajax Fails In Firefox - Works In All Other BrowsersAjax 在 Firefox 中失败 - 适用于所有其他浏览器
【发布时间】：2020-02-10 03:06:23
【问题描述】：

我已经阅读了这个论坛和整个网络，了解为什么 Firefox 浏览器无法通过单击按钮刷新用 PHP 创建的验证码图像。我的脚本适用于 Edge、Chrome、Safari、Brave，但不适用于 Firefox，事实上我已经构建了 3 个不同的脚本，并且所有脚本都在发生同样的事情。我不擅长编码，并按照教程到达这里，但我已经重写了这些脚本以尝试使它们工作，他们所做的但不是在 FF 中。

如果我使用浏览器自己的刷新，Firefox 将刷新图像，它会加载一次图像，仅此而已。

有人可以帮助我并帮助解释为什么会发生这种情况。

实际测试页面

http://www.nailit.nz/REFRESH%20CAPTCHA%20ONLY/index_danials_version.php

感谢您的帮助克里斯

带有图像页面的按钮

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
    $("#btn").click(function(){
        $("#test").load("captcha_image.php");

        return false;
        });

});

</script>
</head>

<body>
<div id="test">
    <p>This is the first bit of content</p>
</div>
<button id="btn">Change Image</button>
</body>
</html>

图片来源页面

<img src ="captcha_CHRIS.php">

PHP 中的创建图像页面

<?php 
    session_start();

    header("Pragma:no-cache");

    $chars = "0123456789abcderghijklmnopABCDEFGHIJKLMNOPQRSTUVWXYZ";

    $random_string = '';

        for($i = 0; $i < 5; $i++){

            $random_string .= $chars[rand(0, strlen($chars)-1)];

            }

    $_SESSION['captcha'] = strtolower($random_string);

    $captcha_img = imagecreatefrompng("assets/captcha_background.png");
    /* Below first numbers desc: 1)font size. 2)rotation angle. 3)left position. 4)top position */
    imagettftext($captcha_img, 24, -8, 8, 32, imagecolorallocate($captcha_img, 255, 114, 0),"assets/SedgwickAve-Regular.ttf",$random_string);
    header("Content-type: image/png");
    imagepng($captcha_img, null, 0);
    imagedestroy($captcha_img);


?>

【问题讨论】：

标签： javascript php html ajax session

【解决方案1】：

这可能是由于 Firefox 的缓存机制造成的。您需要将缓存设置为 false

cache: false

在ajax中，你可以这样尝试

$(document).ready(function(){
  $("#btn").click(function(){   

/*
 nounce is usually any values you set when making a request to server backend. its used to validate data on backend against
CSRF attack */
var nounce= 1;
var datasend = "nounce="+ nounce;
        $.ajax({

            type:'POST',
            url:'captcha_image.php',
            data:datasend,
                        crossDomain: true,
            cache:false,
            success:function(data){
            alert('success');   

                $('#test').fadeIn('slow').prepend(data);

            }


        });


});

});

【讨论】：

您好，感谢 Henrymart 和 Even 下面。我在这里尝试了您的代码（nailit.nz/REFRESH%20CAPTCHA%20ONLY/index_danials_version2.php），我使用了隐私浏览模式并首先删除了 cookie 和数据。但唯一的变化是每次单击按钮时它都会重复图像，但不会刷新它。但这无助于使用 Firefox 访问该网站的人们。您还有其他建议吗？两天后，我觉得我正在逆潮游泳。不过，我感谢您的帮助，谢谢。
我忘了说你给我的代码在其他浏览器中不起作用
我不认为您对如何在 Firefox 中刷新验证码有其他想法？我仍然无法让它工作。我还从网上下载了一些，但它们在 Firefox 中也失败了。

【解决方案2】：

正如 Henrymart 所提到的，它可能是 firefox 缓存。

试试：

以隐私浏览模式访问网站
点击地址栏旁边的i/Shield/Lock，等待几秒，点击“清除cookies和站点数据...”，然后选择域

如果这些都没有帮助，请尝试通过您的 Web 服务器或 Cloudflare 禁用缓存。以下是我找到的一些快速链接：

Apache 清除缓存 - https://httpd.apache.org/docs/2.4/programs/htcacheclean.html
Nginx 清除缓存 - How to clear the cache of nginx?
Cloudflare 清除缓存（开发模式）-https://support.cloudflare.com/hc/en-us/articles/200168246-What-does-Cloudflare-Development-mode-mean-

希望对您有所帮助，如果您解决了问题，请告诉我！

【讨论】：