jQuery的AJAX调用返回传递Rgraph图像数据时，403 Forbidden错误 [英] jQuery AJAX call returning 403 Forbidden error when passing Rgraph image data

问题描述

我工作的一个项目，在那里我已经实现了使用的 Rgraph PHP库一对夫妇的图形/图表。在我的剧本我下面的图：

1. 计算曲线点，并绘制使用Rgraph 绘图（）方法的图表。
2. 创建使用 canvas.toDataURL（）方法的图像数据变量。
3. 在此传递图像数据变量使用jQuery AJAX $。员额（）方法服务器。
4. 将图像保存到服务器通过PHP脚本。

在此解决方案一切的伟大工程在我的本地，但在开发服务器上，AJAX请求传递图像数据返回 403错误。

余登录客户端和服务器侧的数据，以确定该问题。客户端日志确认被传递为imageData变量看起来是正确的。但是服务器端的日志记录证实，在为imageData 传递变量是什么原因造成的问题。

有一个<一个href="http://stackoverflow.com/questions/26228813/jquery-ajax-request-return-forbidden-403-in-cakephp-project">very公布去年这个类似的问题，但他们无法确定这一现象的根本原因。谁能帮助解决这个的正确的方向指向我？

我想这是一个可能的数据编码的问题，但是，如果这种情况下，为什么它在一台服务器上的工作，而不是其他？

我相应的JavaScript：

  radar.Set（chart.contextmenu'，[
     ['获取PNG，RGraph.showPNG]
     空值，
     ['取消'，函数（）{}]
]）;

radar.Draw（）;

VAR为imageData = radar.canvas.toDataURL（图像/ PNG）;

的console.log（'为imageData：'+为imageData）;
的console.log（文件名：+tmpRadar＆LT; PHP的echo $ US？['UsersSurvey'] ['USER_ID'];＆GT;  - ＆LT; PHP的echo $调查？['调查'] ['身份证']; ？＆GT;巴纽'）;

$。员额（/调查/ save_chart，{
    SRC：为imageData，
    文件名：'？tmpRadar＆LT; PHP的echo $ US ['UsersSurvey'] ['USER_ID']; ？＆GT;  - ＆LT;？PHP的echo $调查['调查'] ['身份证']; ？＆GT;巴纽
}）;
 

客户端日志：

 为imageData： data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAOECAYAAACxbcj6AAAgAElEQ…AgQIAAgVECAqxR49YsAQIECBAgQIAAAQIECBAgQKCfwP8CXHJ+WDHVMbcAAAAASUVORK5CYII=
文件名：tmpRadar19-1.png
POST http://website.com/Surveys/save_chart 403（禁止）
 

PHP函数调用AJAX：

 公共职能save_chart（）{
    如果（$这个 - ＆GT;请求 - '是（'阿贾克斯'））{
        $这个 - ＆GT;登录（'请求数据：'.print_r（$这个 - ＆GT;请求 - ＆GT;的数据，真））;

        $文件名= $这个 - ＆GT;请求 - ＆GT;数据['名'];

        $ SRC = $这个 - ＆GT;请求 - ＆GT;数据['SRC'];
        $ SRC = SUBSTR（$的src，strpos（$的src，，）+ 1）;
        $日codeD = base64_de code（$ SRC）;

        $计划生育=的fopen（WWW_ROOT.'files /图/'.$文件名，世行）;
        如果（FWRITE（$计划生育，$日codeD））{
            fclose函数（$ FP）;
            返回json_en code（阵列（'成功'=＆GT;'1'））;
        } 其他 {
            fclose函数（$ FP）;
            返回json_en code（阵列（'成功'=＆GT;'0'））;
        }
    }
}
 

解决方案

假设的 CORS 是不是这里的问题（它听起来并不像它被赋予了它的正常工作在你的本地主机，它听起来像你张贴到您从中接收到的原始得到相同的域），它可能在你的本地主机和devbox阿帕奇之间的配置错误。鉴于该问题仅是你的基部64连接codeD图像后，很可能过大，使Apache是​​拒绝它。

每这太帖子，尝试设置在任何你的php.ini以下

 的post_max_size = 20M
的upload_max_filesize = 20M
 

或在.htaccess / httpd.conf中/虚拟主机：

  php_value的post_max_size 20M
php_value的upload_max_filesize = 20M
 

请注意，我不能告诉你肯定的，如果这是原因，直到您发布的Apache的错误日志。

I am working on a project, where I have implemented a couple of graphs/charts using the Rgraph PHP library. In my script I do the following for the graphs:

1. Calculate the graph points and draw the graph using the Rgraph Draw() method.
2. Create an image data variable using the canvas.toDataURL() method.
3. Pass this image data variable to the server using jQuery AJAX $.post() method.
4. Save the image to server via the PHP script.

Everything in this solution works great on my localhost, however on the development server, the AJAX request that passes the image data returns a 403 Error.

I logged the data on both the client and server side to determine the issue. Client side logging confirms the imageData variable being passed looks correct. However server side logging confirms that the imageData variable being passed is what is causing the issue.

There was a very similar question posted last year about this, however they were unable to determine the root cause of this. Can anyone help point me in the right direction of resolving this?

I'm thinking this is a possible data encoding issue, but if this the case, why does it work on one server and not the other?

My Relevant 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'
});

Client Side Logging:

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

PHP Function called by AJAX:

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'));
        }
    }
}

解决方案

Assuming CORS isn't the issue here (which it doesn't sound like it is given that it's working fine on your localhost and that it sounds like your POSTing to the same domain from which you received the original GET), it's likely a misconfiguration between Apache on your localhost and devbox. Given that the issue is only with your base 64 encoded image POST, it's likely too large so apache is rejecting it.

Per this SO post, try setting the following in either your php.ini:

post_max_size=20M
upload_max_filesize=20M

or in .htaccess / httpd.conf / virtualhost:

php_value post_max_size 20M
php_value upload_max_filesize=20M

Note that I can't tell you for sure if this is the cause until you post the apache error log.

这篇关于jQuery的AJAX调用返回传递Rgraph图像数据时，403 Forbidden错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！