2015-05-06 7 views
13

Pracuję nad projektem, w którym zaimplementowałem kilka wykresów/wykresów przy użyciu biblioteki PHP Rgraph. W moim skrypcie wykonuję następujące czynności dla wykresów:Powracający wywołanie jQuery AJAX 403 Niedozwolony błąd podczas przekazywania danych obrazu Rgraph

  1. Oblicz punkty wykresu i narysuj wykres za pomocą metody Rgraph Draw().
  2. Utwórz zmienną danych obrazu, używając metody canvas.toDataURL().
  3. Przekaż tę zmienną danych obrazu do serwera przy użyciu metody jQuery AJAX $.post().
  4. Zapisz obraz na serwerze za pomocą skryptu PHP.

Wszystko w tym rozwiązaniu działa świetnie na moim serwerze lokalnym, jednak na serwerze programowania żądanie AJAX, które przekazuje dane obrazu, zwraca wartość 403 Error.

Zalogowałem dane po stronie klienta i serwera, aby ustalić problem. Rejestrowanie po stronie klienta potwierdza, że ​​określona zmienna imageData wygląda poprawnie. Jednak rejestrowanie po stronie serwera potwierdza, że ​​przyczyną problemu jest przesłana zmienna imageData.

Nie było very similar question posted last year about this, jednak nie byli w stanie określić głównej przyczyny tego. Czy ktokolwiek może wskazać mi właściwy kierunek rozwiązania tego problemu?

Myślę, że jest to możliwy problem z kodowaniem danych, ale jeśli tak, to dlaczego działa on na jednym serwerze, a nie na drugim?

Moja Stosowna 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) 

Funkcja PHP wywołana przez 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')); 
     } 
    } 
} 
+0

proszę pokazać zarówno stronę klienta rejestrującą, jak i serwerową (zarówno tę, która działa, jak i tę, która nie działa). –

+0

Czy sprawdziłeś pliki dziennika apache? Myślę, że mogą dać wgląd w problem. – dav

+0

Czy zweryfikowałeś, że to nie jest kwestia CORS? https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS – DIMMSum

Odpowiedz

1

Zakładając CORS nie jest problem tutaj (co nie brzmi jak to jest podane, że działa dobrze na localhost i że to brzmi jak komentarz do tej samej domeny, z której otrzymałeś oryginalny GET), to prawdopodobnie błędna konfiguracja między Apache na twoim localhost i devbox. Biorąc pod uwagę, że problem dotyczy tylko POST z kodowaniem podstawowym 64, jest prawdopodobnie zbyt duży, aby Apache go odrzucił.

Per this SO post, spróbuj ustawić następujące zarówno w php.ini:

post_max_size=20M 
upload_max_filesize=20M 

lub w .htaccess/httpd.conf/virtualhost:

php_value post_max_size 20M 
php_value upload_max_filesize=20M 

Zauważ, że nie mogę powiedzieć na pewno, jeśli to jest przyczyną, dopóki nie opublikujesz logu błędów Apache.

-2

Twoje wykorzystanie danych w .post() jest trochę za mało. Jeśli próbujesz przekazać obiekt JSON jako dane dla drugiego argumentu .post(), musisz poprawnie utworzyć go w łańcuchu JSON. Spróbuj zawijać słownik za pomocą JSON.stringify(). To zajmie wartość javascript {key1: value1, key2: value2} i sformatuj ją.

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; 
+0

Dziękuję za odpowiedź, ale to nic dla mnie nie zmienia. Ponadto, metoda jquery '$ .post' może przyjmować ciąg lub obiekt jako drugi parametr. https://api.jquery.com/jquery.post/ – McWayWeb

2

Jest to zrobić z mod_security (moduł Apache) oraz http:// część adresu URL.

Masz dwie opcje Tutaj

  • zmodyfikować moduł Apache
  • stronie klienta obejście

Spróbuj usunąć imagedata z formularza Piszesz i powinna ona przedstawić.

Źródło: 403-on-form-submit

+2

Prawdopodobnie masz rację. Inną opcją jest użycie FormData do przesłania pliku. Zobacz http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax#answer-5976031 – twicejr

Powiązane problemy