Question

我正在开发一个项目，我使用 Rgraph PHP库实现了几个图表/图表。在我的脚本中，我为图表执行以下操作：

使用Rgraph Draw()方法计算图形点并绘制图形。
使用canvas.toDataURL()方法创建图像数据变量。
使用jQuery AJAX $.post()方法将此图像数据变量传递给服务器。
通过PHP脚本将图像保存到服务器。

此解决方案中的所有内容在我的localhost上运行良好，但是在开发服务器上，传递图像数据的AJAX请求返回403 Error。

我在客户端和服务器端都记录了数据以确定问题。客户端日志记录确认传递的imageData变量看起来正确。但是，服务器端日志记录确认传递的 imageData 变量是导致问题的原因。

有一个very similar question posted last year about this，但他们无法确定这个的根本原因。任何人都可以帮我指出解决这个问题的正确方向吗？

我认为这是一个可能的数据编码问题，但如果是这种情况，为什么它在一台服务器而不是另一台服务器上运行？

我的相关Javascript：

radar.Set('chart.contextmenu', [
     ['Get PNG', RGraph.showPNG],
     null,
     ['Cancel', function () {}]
]);

radar.Draw();   

var imageData = radar.canvas.toDataURL("image/png");

console.log('imageData: ' + imageData);
console.log('filename: ' + 'tmpRadar<?php echo $us['UsersSurvey']['user_id']; ?>-<?php echo $survey['Survey']['id']; ?>.png');

$.post("/Surveys/save_chart", { 
    src     : imageData, 
    filename: 'tmpRadar<?php echo $us['UsersSurvey']['user_id']; ?>-<?php echo $survey['Survey']['id']; ?>.png'
});

客户端记录：

imageData: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAOECAYAAACxbcj6AAAgAElEQ…AgQIAAgVECAqxR49YsAQIECBAgQIAAAQIECBAgQKCfwP8CXHJ+WDHVMbcAAAAASUVORK5CYII=
filename: tmpRadar19-1.png
POST http://website.com/Surveys/save_chart 403 (Forbidden)

由AJAX调用的PHP函数：

public function save_chart() {
    if($this->request->is('ajax')) {
        $this->log('request data: '.print_r($this->request->data, true));

        $filename = $this->request->data['filename'];

        $src     = $this->request->data['src'];
        $src     = substr($src, strpos($src, ",") + 1);
        $decoded = base64_decode($src);

        $fp = fopen(WWW_ROOT.'files/graphs/'.$filename,'wb');
        if(fwrite($fp, $decoded)) {
            fclose($fp);
            return json_encode(array('success' => '1'));
        } else {
            fclose($fp);
            return json_encode(array('success' => '0'));
        }
    }
}

Answer 1

与$(document).ready(function(){ $(".categories").toggle( function(){ $(".expandcontrols").animate({ right: "15%" }, 500, function(){ }); }, function (){ $(".expandcontrols").animate({ right: "0%" }, 500, function(){ }); }); });（Apache模块）和网址的mod_security部分有关。

这里有两个选项，

修改Apache模块
客户端解决方法

尝试从您发布的表单中删除http://，然后提交。

来源：403-on-form-submit

Answer 2

假设CORS不是问题（这听起来不像是在你的localhost上工作正常，而且听起来就像是你在同一个域中发布了你收到的原始文件GET），你的本地主机上的Apache和devbox之间可能存在配置错误。鉴于该问题仅适用于您的base 64编码图像POST，它可能太大，因此apache拒绝它。

按this SO post，尝试在php.ini中设置以下内容：

post_max_size=20M
upload_max_filesize=20M

或.htaccess / httpd.conf / virtualhost：

php_value post_max_size 20M
php_value upload_max_filesize=20M

请注意，在发布apache错误日志之前，我无法确定这是否是原因。

Answer 3

您在.post（）中使用数据有点不对劲。如果您尝试将JSON对象作为.post（）的第二个参数的数据传递，则需要将其正确地形成为JSON字符串。尝试使用JSON.stringify（）包装字典。它将获取您的javascript值{key1：value1，key2：value2}并对其进行格式化。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

$.post("/Surveys/save_chart", JSON.stringify(
  { 
    src     : imageData, 
    filename: 'tmpRadar<?php echo $us['UsersSurvey']['user_id']; ?>-<?php echo $survey['Survey']['id']; ?>.png'
  }
) //end stringify 
)//end post;

传递Rgraph图像数据时，jQuery AJAX调用返回403 Forbidden错误

3 个答案: