POST nicht unterstützt Ausnahme nach Aufruf an REST-Service mit XHR senden

Question

Ich habe eine REST API entwickelt mit Spring Boot, die POST-Anfragen akzeptiert und einige Verarbeitung für sie. Es würde dann zu einer anderen Ergebnisseite umgeleitet werden. Die Steuerung ist wie folgt:

@RequestMapping(method = RequestMethod.POST, value = "/person") 
    public String arrayTest(@RequestParam("personid") String personid, Model model) throws IOException{ 
     CoreDriver driver=new CoreDriver(); 
     ResultData result=driver.initProcess(personid); 
     model.addAttribute("attr",result.getMismatchList()); 
     return "results"; 

    } 

In diesem Fall wird nach der initProcess Funktion abgeschlossen ist, wäre es auf eine Seite weitergeleitet werden: results.html Dies funktioniert, wenn ich mit dem Service ein Formular wie folgt aufrufen :

<form id="mainform" method="POST" enctype="multipart/form-data" action="/person"> 
      <table BORDER="1"> 
       <tr> 
        <td>Enter person ID</td> 
        <td> 
         <input type="text" name="personid" id="person"> 
        </td> 
       </tr> 
       <tr> 
        <td><input type="submit" value="submit"/></td> 
       </tr> 
      </table> 
     </form> 

Allerdings, wenn ich den Dienst mit der Sendefunktion von XHR aufrufen, die REST-aPI erfolgreich aufruft, aber es auf die results.html Seite nicht umleiten nicht. Stattdessen gibt es mir einen Fehler: Request-Methode 'POST' wird nicht unterstützt. Mein Javascript hierfür ist wie folgt:

upload: function(image_data_uri, target_url, callback) { 
var http = new XMLHttpRequest(); 
     http.open("POST", target_url, false); 
var form = new FormData(); 
     var arrayLength = proc_image_data.length; 
     for (var j = 0; j < arrayLength; j++) { 

     form.append(form_name, proc_data[j], form_name+"."+fmt.replace(/e/, '')); 
} 

     http.send(form); 
    } 

Diese JS-Funktion über folgendes Formular aufgerufen wird:

<form id="mainform" method="POST" enctype="multipart/form-data" action=""> 
      <table BORDER="1"> 

       <tr> 
        <td>Enter person ID</td> 
        <td> 
         <input type="text" name="personid" id="person"> 
        </td> 
       </tr> 
       <tr> 
        <td><input type="submit" value="submit" onclick="shot()"/></td> 
       </tr> 
      </table> 
     </form> 

function shot() { 
     var personId=document.getElementById('person').value; 
     var url='/person?personid='+personId; 
       Test.upload(webcamuri, url, function(code, text) { 

     }); 
    } 

Ich bin nicht sicher, warum die Umleitung funktioniert, wenn ich die api direkt aus dem aufrufen Form aber nicht über den JS, der XHR verwendet, senden. Könnten Sie bitte helfen, das Problem hier zu identifizieren?

Answer 1

Dies ist ein Problem im Zusammenhang mit CORS - Cross-Source-Ressource teilen. Um auf den REST-Dienst über XHR zugreifen zu können, muss der Dienst die richtigen Header an den Browser senden (der wahrscheinlich eine Preflight-Anforderung ausführt).

Sie können dies in Ihrem REST-Controller erreichen, indem Sie die @CrossOrigin Annotation zu Ihrer arrayTest-Methode hinzufügen. (siehe Spring docu)

Answer 2

So konnte ich das Problem nach ein wenig Debugging beheben. Ich entfernte das method Attribut aus der Form sowie den folgenden Code innerhalb der Callback-Funktion für Test.upload():

document.write(text); 

Also im Grunde text gibt den HTML-Code der Seite umgeleitet hinzugefügt. Sobald der XHR send-Aufruf abgeschlossen ist, wird der HTML-Code über den Rückruf in den Browser geschrieben.