web-dev-qa-db-fra.com

Comment faire un jsonp POST demande qui spécifie contentType avec jQuery?

J'ai besoin de faire une demande jsonp POST avec le type de contenu 'application/json'. Je peux obtenir la demande POST au serveur comme ceci:

      jQuery.ajax({
        type: 'POST',
        url: url,
        data: data,
        success: success,
        error: error,
        async: true,
        complete: complete,
        timeout: TIMEOUT,
        scriptCharset: 'UTF-8',
        dataType: 'jsonp',
        jsonp: '_jsonp',
      });

Mais dès que j'ajoute la ligne: contentType: "application/json", il commence à l'envoyer sous forme de requête OPTIONS plutôt que sous POST.

Comment puis-je spécifier le type de contenu et toujours soumettre la demande en tant que POST?

javascriptjqueryajaxhttpjsonp
37
Marcus

Il n'est pas possible de faire une demande JSONP POST.

JSONP fonctionne en créant une balise <script> qui exécute Javascript à partir d'un domaine différent; il n'est pas possible d'envoyer une demande POST à l'aide d'une balise <script>.

51
SLaks

Utilisez json dans dataType et envoyez comme ceci:

        $.ajax({
            url: "your url which return json",
            type: "POST",
            crossDomain: true,
            data: data,
            dataType: "json",
            success:function(result){
                alert(JSON.stringify(result));
            },
            error:function(xhr,status,error){
                alert(status);
            }
        });

et mettez ces lignes dans votre fichier côté serveur:

siPHP:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Max-Age: 1000');

si Java: 

response.addHeader( "Access-Control-Allow-Origin", "*" ); 
response.addHeader( "Access-Control-Allow-Methods", "POST" ); 
response.addHeader( "Access-Control-Max-Age", "1000" );
6
Pratik Butani

Il y a une solution (bidouillage) que j'ai déjà faite plusieurs fois, vous pourrez poster avec JsonP . (Vous pourrez poster un formulaire, plus gros que 2000 caractères que vous pouvez utiliser avec GET)

Application client Javascript 

$.ajax({
  type: "POST", // you request will be a post request
  data: postData, // javascript object with all my params
  url: COMAPIURL, // my backoffice comunication api url
  dataType: "jsonp", // datatype can be json or jsonp
  success: function(result){
    console.dir(result);
  }
});

Java: 

response.addHeader( "Access-Control-Allow-Origin", "*" ); // open your api to any client 
response.addHeader( "Access-Control-Allow-Methods", "POST" ); // a allow post
response.addHeader( "Access-Control-Max-Age", "1000" ); // time from request to response before timeout

PHP: 

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Max-Age: 1000');

En procédant ainsi, vous ouvrez votre serveur à toute demande de publication, vous devez le sécuriser à nouveau en fournissant ident ou autre chose.

Avec cette méthode, vous pouvez également changer le type de requête de jsonp à json, les deux fonctionnent, il suffit de définir le bon type de contenu de réponse

jsonp 

response.setContentType( "text/javascript; charset=utf-8" );

json 

response.setContentType( "application/json; charset=utf-8" );

Veuillez noter que votre serveur ne respectera plus le SOP (même politique d'origine), mais qui s'en soucie?

1
Dimitri Kopriwa