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

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

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

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

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

去年有一个非常类似的问题 ,但他们无法确定这个问题的根本原因。 任何人都可以帮我指出解决这个问题的正确方向吗?

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

我的相关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-.png'); $.post("/Surveys/save_chart", { src : imageData, filename: 'tmpRadar-.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')); } } } 

假设CORS不是这里的问题(它听起来不像它在你的localhost上运行正常并且听起来就像你在你收到原始GET的同一域中的POST),它可能是一个配置错误在本地主机上的Apache和devbox之间。 鉴于该问题仅适用于您的base 64编码图像POST,它可能太大,因此apache拒绝它。

根据此SOpost ,尝试在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错误日志之前,我无法确定是否这是原因。

它与mod_security (Apache模块)和URL的http://部分有关。

你有两个选择,

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

尝试从您发布的表单中删除imagedata ,它应该提交。

资料来源: 403-on-form-submit

您在.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-.png' } ) //end stringify )//end post;