Comment obtenir un partage des ressources entre les origines (CORS)

REQUEST:

 $.ajax({
            url: "http://localhost:8079/students/add/",
            type: "POST",
            crossDomain: true,
            data: JSON.stringify(somejson),
            dataType: "json",
            success: function (response) {
                var resp = JSON.parse(response)
                alert(resp.status);
            },
            error: function (xhr, status) {
                alert("error");
            }
        });

réponse:

response = HttpResponse(json.dumps('{"status" : "success"}'))
response.__setitem__("Content-type", "application/json")
response.__setitem__("Access-Control-Allow-Origin", "*")

return response

m'a pris un certain temps pour trouver la solution.

si la réponse de votre serveur est correcte et que la requête est le problème, vous devez ajouter withCredentials: true au xhrFields dans la requête:

$.ajax({
    url: url,
    type: method,
    // This is the important part
    xhrFields: {
        withCredentials: true
    },
    // This is the important part
    data: data,
    success: function (response) {
        // handle the response
    },
    error: function (xhr, status) {
        // handle errors
    }
});

Remarque: jQuery >= 1.5.1 est nécessaire

Eh bien, j'ai lutté avec cette question pendant quelques semaines.

la façon la plus facile, la plus conforme et la plus non-pirate de le faire est probablement d'utiliser une API JavaScript de fournisseur qui ne fait pas d'appels basés sur le navigateur et peut traiter les demandes D'origine croisée.

E. G. API JavaScript de Facebook et API Google JS.

dans le cas où votre fournisseur D'API n'est pas à jour et ne supporte pas L'en-tête Cross Origin Resource Origin '*' dans sa réponse et n'a pas d'api JS (Oui je parle de vous Yahoo ), vous êtes frappé avec l'une des trois options -

1. en utilisant jsonp dans vos requêtes qui ajoute une fonction de rappel à votre URL où vous pouvez gérer votre réponse. Avertissement ceci va changer L'URL de la requête de sorte que votre serveur API doit être équipé pour gérer le ?callback= à la fin de L'URL.

2. Envoyez la requête à votre serveur API qui est controller par vous et est soit dans le même domaine que le client ou a le partage de ressources D'origine croisée activé d'où vous pouvez proxy la requête vers le serveur D'API de tierce partie.

3. probablement le plus utile dans les cas où vous faites des requêtes simples et avez besoin de gérer l'interaction utilisateur Haha! window.open('url',"newwindowname",'_blank', 'toolbar=0,location=0,menubar=0')

en utilisant ceci en combinaison avec Laravel résolu mon problème. Il suffit d'ajouter cet en-tête à votre requête jquery Access-Control-Request-Headers: x-requested-with et assurez-vous que la réponse côté serveur a cet en-tête Access-Control-Allow-Headers: * .

j'ai résolu mon propre problème en utilisant l'API distance matrix de google en définissant mon en-tête de requête avec jQuery ajax. jetez un oeil ci-dessous.

var settings = {
          'cache': false,
          'dataType': "jsonp",
          "async": true,
          "crossDomain": true,
          "url": "https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&origins=place_id:"+me.originPlaceId+"&destinations=place_id:"+me.destinationPlaceId+"&region=ng&units=metric&key=mykey",
          "method": "GET",
          "headers": {
              "accept": "application/json",
              "Access-Control-Allow-Origin":"*"
          }
      }

      $.ajax(settings).done(function (response) {
          console.log(response);

      });

notez ce que j'ai ajouté aux paramètres

**

"headers": {
          "accept": "application/json",
          "Access-Control-Allow-Origin":"*"
      }

**

J'espère que cette aide.

pour une raison quelconque, une question sur les demandes GET a été fusionnée avec celle-ci, donc je vais y répondre ici.

cette fonction simple obtiendra de façon asynchrone une réponse D'état HTTP à partir d'une page compatible avec la fonctionnalité CORS. Si vous l'exécutez, vous verrez que seule une page avec les en-têtes appropriés retourne un statut 200 si vous accédez via XMLHttpRequest -- que GET ou POST soit utilisé. Rien ne peut être fait du côté du client pour contourner cela, sauf peut-être en utilisant JSONP si vous avez juste besoin d'un json objet.

ce qui suit peut être facilement modifié pour obtenir les données détenues dans l'objet xmlHttpRequestObject:

function checkCorsSource(source) {
  var xmlHttpRequestObject;
  if (window.XMLHttpRequest) {
    xmlHttpRequestObject = new XMLHttpRequest();
    if (xmlHttpRequestObject != null) {
      var sUrl = "";
      if (source == "google") {
        var sUrl = "https://www.google.com";
      } else {
        var sUrl = "https://httpbin.org/get";
      }
      document.getElementById("txt1").innerHTML = "Request Sent...";
      xmlHttpRequestObject.open("GET", sUrl, true);
      xmlHttpRequestObject.onreadystatechange = function() {
        if (xmlHttpRequestObject.readyState == 4 && xmlHttpRequestObject.status == 200) {
          document.getElementById("txt1").innerHTML = "200 Response received!";
        } else {
          document.getElementById("txt1").innerHTML = "200 Response failed!";
        }
      }
      xmlHttpRequestObject.send();
    } else {
      window.alert("Error creating XmlHttpRequest object. Client is not CORS enabled");
    }
  }
}

<html>
<head>
  <title>Check if page is cors</title>
</head>
<body>
  <p>A CORS-enabled source has one of the following HTTP headers:</p>
  <ul>
    <li>Access-Control-Allow-Headers: *</li>
    <li>Access-Control-Allow-Headers: x-requested-with</li>
  </ul>
  <p>Click a button to see if the page allows CORS</p>
  <form name="form1" action="" method="get">
    <input type="button" name="btn1" value="Check Google Page" onClick="checkCorsSource('google')">
    <input type="button" name="btn1" value="Check Cors Page" onClick="checkCorsSource('cors')">
  </form>
  <p id="txt1" />
</body>
</html>

j'ai eu exactement le même problème où jQuery ajax m'a seulement donné des problèmes cors sur les demandes de poste où les demandes get travaillé très bien - j'ai tout fatigué ci-dessus sans résultats. J'ai eu la bonne des en-têtes dans mon serveur etc. Changer pour utiliser XMLHTTPRequest au lieu de jquery a corrigé mon problème immédiatement. Peu importe la version de jquery que j'ai utilisée, ça ne l'a pas réparé. Fetch fonctionne aussi sans problème si vous n'avez pas besoin de la compatibilité arrière du navigateur.

        var xhr = new XMLHttpRequest()
        xhr.open('POST', 'https://mywebsite.com', true)
        xhr.withCredentials = true
        xhr.onreadystatechange = function() {
          if (xhr.readyState === 2) {// do something}
        }
        xhr.setRequestHeader('Content-Type', 'application/json')
        xhr.send(json)

avec un peu de chance cela aide quelqu'un d'autre avec les mêmes problèmes.

ceci est un résumé de ce qui a fonctionné pour moi:

définir une nouvelle fonction (enveloppé $.ajax pour simplifier):

jQuery.postCORS = function(url, data, func) {
  if(func == undefined) func = function(){};
  return $.ajax({
    type: 'POST', 
    url: url, 
    data: data, 
    dataType: 'json', 
    contentType: 'application/x-www-form-urlencoded', 
    xhrFields: { withCredentials: true }, 
    success: function(res) { func(res) }, 
    error: function() { 
            func({}) 
    }
  });
}

Utilisation:

$.postCORS("https://example.com/service.json",{ x : 1 },function(obj){
      if(obj.ok) {
           ...
      }
});

fonctionne aussi avec .done , .fail , etc:

$.postCORS("https://example.com/service.json",{ x : 1 }).done(function(obj){
      if(obj.ok) {
           ...
      }
}).fail(function(){
    alert("Error!");
});

côté serveur (dans ce cas où example.com est hébergé), définissez ces en-têtes (ajout d'un exemple de code en PHP):

header('Access-Control-Allow-Origin: https://not-example.com');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 604800');
header("Content-type: application/json");
$array = array("ok" => $_POST["x"]);
echo json_encode($array);

C'est la seule façon savoir vraiment poster cross-domaine de JS.

JSONP convertit le POST EN GET qui peut afficher des informations sensibles dans les journaux du serveur.

C'est un peu tard pour la fête, mais je me bats avec ça depuis quelques jours. C'est possible et aucune des réponses que j'ai trouvées ici n'a fonctionné. C'est d'une simplicité trompeuse. Voici l' .appel ajax:

    <!DOCTYPE HTML>
    <html>
    <head>
    <body>
     <title>Javascript Test</title>
     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
     <script type="text/javascript">
     $(document).domain = 'XXX.com';
     $(document).ready(function () {
     $.ajax({
        xhrFields: {cors: false},
        type: "GET",
        url: "http://XXXX.com/test.php?email='steve@XXX.com'",
        success: function (data) {
           alert(data);
        },
        error: function (x, y, z) {
           alert(x.responseText + " :EEE: " + x.status);
        }
    });
    });
    </script> 
    </body>
    </html>

Voici Le php côté serveur:

    <html>
    <head>
     <title>PHP Test</title>
     </head>
    <body>
      <?php
      header('Origin: xxx.com');
      header('Access-Control-Allow-Origin:*');
      $servername = "sqlxxx";
      $username = "xxxx";
      $password = "sss";
      $conn = new mysqli($servername, $username, $password);
      if ($conn->connect_error) {
        die( "Connection failed: " . $conn->connect_error);
      }
      $sql = "SELECT email, status, userdata  FROM msi.usersLive";
      $result = $conn->query($sql);
      if ($result->num_rows > 0) {
      while($row = $result->fetch_assoc()) {
        echo $row["email"] . ":" . $row["status"] . ":" . $row["userdata"] .  "<br>";
      }
    } else {
      echo "{ }";
    }
    $conn->close();
    ?>
    </body>