JQuery Ajax: No ‘Access-Control-Toe-Toe-Origin’-header is aanwezig op de gevraagde bron

Ik probeer gegevens naar een API te plaatsen van mijn localhost: 4502-poort. Toen ik probeerde gegevens naar deze API te plaatsen met behulp van postbode, werden de gegevens in de backend toegevoegd door de basismachtigingssleutel te bieden. Hetzelfde probeer ik hier in de Ajax JQuery-oproep te implementeren, maar het krijgen van een Cors-fout. Eerste keer in jQuery probeer ik de gegevens te plaatsen, help hier alstublieft, wat ik kan toevoegen. Ik heb de API-sleutel tot de basisvergunning als gebruikersnaam en wachtwoord kunnen leeg blijven.

 <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>

Antwoord 1, autoriteit 100%

Ik heb dataType: ‘jsonp’ toegevoegd en het werkt!

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

JSONP is een methode om JSON-gegevens te verzenden zonder dat u zich zorgen hoeft te maken over domeinoverschrijdende problemen. Meer lezen

Antwoord 2, autoriteit 12%

Het is een CORS-probleem, uw api is niet rechtstreeks toegankelijk vanaf een externe of andere oorsprong. Om toe te staan dat een ander ip-adres of andere oorsprong toegang krijgt tot uw api, moet u de ‘Access-Control-Allow-Origin’ toevoegen aan de api’s header, kunt u de waarde instellen op ‘*’ als u wilt dat deze voor iedereen toegankelijk is, of u kunt een specifiek domein of ips instellen zoals ‘http://siteA.com‘ of ‘http://192. ip adres ‘;

Voeg dit toe aan de kop van uw api, het kan variëren afhankelijk van hoe u json-gegevens weergeeft,

als je ajax gebruikt, zou je header er als volgt uitzien om gegevens op te halen en weer te geven,

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

Antwoord 3, autoriteit 6%

Als je NodeJ’s gebruikt voor je server, voeg deze dan gewoon toe aan je route en je bent in orde

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

Je route ziet er dan ongeveer zo uit

   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});
});

Klantzijde voor Ajax-oproep

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>

Je zou zoiets als dit in je browserconsole moeten hebben als reactie

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

Geniet van coderen….

Antwoord 4, autoriteit 4%

Houd er rekening mee dat u voor alle verzoeken constant HTTPS of HTTP moet gebruiken.
Ik had dezelfde foutmelding:
“Er is geen ‘Access-Control-Allow-Origin’-header aanwezig op de gevraagde bron.”

Antwoord 5

Als de aangevraagde bron van de server Flask gebruikt.
Installeer Flask-CORS.