web-dev-qa-db-fra.com

Jquery AJAX: aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée

J'essaie de publier des données sur une API à partir de mon port localhost: 4502. Lorsque j'ai essayé de publier des données sur cette API à l'aide de POSTMAN, les données ont été ajoutées au serveur en fournissant la clé d'autorisation de base. La même chose que j'essaie de mettre en œuvre ici dans l'appel Ajax Jquery, mais en obtenant une erreur CORS. La première fois que jquery essaie de publier les données, aidez-moi ici, ce que je peux ajouter. J'ai obtenu la clé d'API pour l'autorisation de base car un nom d'utilisateur et un mot de passe peuvent être laissés vierges.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script>
               $(document).ready(function(){
               $("#Save").click(function(){

                  var person = new Object();
                  person.Name = $('#Name').val();
                  person.EmailAddress = $('#EmailAddress').val();
                  person.CustomFields = [0];
                  person.CustomFields[0].Key = "[Country]";
                  person.CustomFields[0].Value = $('#Country').val();;

               $.ajax({
                 url: 'https://api.createsend.com/api/v3.1/subscribers/7c7a6087b0e450ad72b38be83098e271.json',
                 type: 'POST',
                 dataType: 'json',
                 data:person,
                 success: function(data,textStatus,xhr){

                     console.log(data);
                 },
                 error: function(xhr,textStatus,errorThrown){
                     console.log('Error Something');
                 },
                 beforeSend: function(xhr) {

                    xhr.setRequestHeader("Authorization", "Basic OTdlMjVmNWJiMTdjNzI2MzVjOGU3NjlhOTI3ZTA3M2Q5MWZmMTA3ZDM2YTZkOWE5Og=="); 
                 }
             });
         });
     });
  </script>
jqueryajaxcorsaem
8
Ashish Rai

J'ai ajouté dataType: 'jsonp' et ça marche!

$.ajax({
   type: 'GET',
   crossDomain: true,
   dataType: 'jsonp',
   url: '',
   success: function(jsondata){

   }
})
7
LieberHunter

C'est un problème CORS, votre API ne peut pas être accédée directement depuis une origine distante ou différente. Pour permettre à d'autres adresses IP ou origines d'accéder à votre API, vous devez ajouter le code "Accès-Contrôle-Autoriser-Origine" dans l'en-tête de l'API, vous pouvez définir sa valeur sur '*' si vous souhaitez qu'elle soit accessible à tous, ou vous pouvez définir un domaine ou des ips spécifiques tels que ' http://siteA.com ' ou ' http: // 192 . adresse IP ';

Incluez ceci dans l'en-tête de votre API, cela peut varier en fonction de l'affichage des données JSON, 

si vous utilisez ajax, pour récupérer et afficher les données, l'en-tête ressemblera à ceci:

$.ajax({
   url: '',
   headers: {  'Access-Control-Allow-Origin': 'htt://site allowed to access' },
   data: data,
   type: 'dataType',
   /* etc */
   success: function(jsondata){

   }
})
2
apelidoko

Si vous utilisez NodeJs pour votre côté serveur, ajoutez-les simplement à votre route et vous serez ok

 res.header("Access-Control-Allow-Origin", "*");
 res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

Votre itinéraire ressemblera alors à ceci

router.post('/odin', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");


return res.json({Name: req.body.name, Phone: req.body.phone});

});

Côté client pour l'appel Ajax

 var sendingData = {
   name: "Odinfono Emmanuel",
   phone: "1234567890"
}

<script>
  $(document).ready(function(){

    $.ajax({
        url: 'http://127.0.0.1:3000/odin',            
        method: 'POST',
        type: 'json',
        data: sendingData,
        success: function (response) {
            console.log(response);
        },
        error: function (error) {
            console.log(error);
        }
        });
    });
</script>

Vous devriez avoir quelque chose comme ceci dans la console de votre navigateur en réponse

{ name: "Odinfono Emmanuel", phone: "1234567890"}

Profitez de la programmation ....

0
Odin