Jquery AJAX: Keine "Access-Control-Allow-Origin' - header vorhanden ist, auf die angeforderte Ressource

Ich bin versucht, post-Daten an eine API von meine localhost:port 4502. Wenn ich habe versucht, post-Daten, um diese API verwenden POSTBOTE die Daten habe Hinzugefügt in das backend, indem Sie die Basic Authorization key. Das gleiche versuche ich umzusetzen, hier in der Ajax-Jquery-Aufruf, sondern immer einen CORS Fehler. Ersten mal in jquery bin ich versucht um die Daten zu veröffentlichen, helfen Sie bitte hier, was ich hinzufügen kann. Ich habe den API-key für die Grundlegende Berechtigung als Benutzername und Kennwort können leer gelassen werden.

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

Was Sie zu tun versuchen ist, den Zugriff auf eine api, durch AJAX. Ist dies nicht möglich, (theoretisch, ist es, aber ich werde mich nicht in diese zu bekommen). Sie sollte mit einer server-Sprache (PHP, Node.js, etc), eine HTTP-Anfrage an die api. Von dort aus können Sie die Daten, und verwenden Sie es wie Sie möchten.
Sie sind auf der Suche für JSONP für Cross-Domain AJAX requests.
Danke für Eure Antworten. also Sie meinte ich muss das gleiche schreiben nennen in diesem wie php oder node.js?
Ja; Jedoch, es ist mehr als das. Die backend-Sprache muss in der Lage sein, um die Kommunikation mit dem frontend. Es ist mehr als nur das umschreiben der gleichen nennen, denn HTTP ist ein ganz anderes Feld, als AJAX. Sobald Sie lernen, wie Sie den HTTP-Aufruf über das backend, werden Sie dann brauchen, um zu lernen, wie Sie zu kommunizieren mit dem frontend (Mit Knoten, es ist nicht so schwer, imo). So, zum Schluss aus: Node.js oder PHP wird erlauben Sie, um den Anruf zu machen, und dann können Sie kommunizieren es an das frontend. tutorialspoint.com/nodejs <- Ein leichter start für das Verständnis Knoten ist. Happy coding und GL

InformationsquelleAutor Ashish Rai | 2017-11-28

7

Habe ich Hinzugefügt, dataType: 'jsonp' und es funktioniert!
```
$.ajax({
   type: 'GET',
   crossDomain: true,
   dataType: 'jsonp',
   url: '',
   success: function(jsondata){

   }
})
```
Wenn jemand will, die Erklärung für dieses: stackoverflow.com/a/17299796/1815010

InformationsquelleAutor LieberHunter
2

Seine ein CORS-Problem, Ihre api nicht direkt zugegriffen werden kann, die von remote oder unterschiedlicher Herkunft, um zu zulassen, dass andere ip-Adresse oder anderer Herkunft, die aus dem Zugriff auf Sie-api, sollten Sie die "Access-Control-Allow-Origin" auf der api-header, können Sie dessen Wert auf '*', wenn Sie wollen, dass es für alle zugänglich sein, oder Sie können bestimmte domain-oder ips wie 'http://siteA.com' oder 'http://192. die ip-Adresse ';

Gehören diese auf die api-header, es kann variieren, je nachdem, wie Sie anzeigen von json-Daten,

wenn Ihr mit ajax, abrufen und anzeigen von Daten als header würde dann so Aussehen,
```
$.ajax({
   url: '',
   headers: {  'Access-Control-Allow-Origin': 'htt://site allowed to access' },
   data: data,
   type: 'dataType',
   /* etc */
   success: function(jsondata){

   }
})
```
Danke, ich werde versuchen, fügen Sie die Allow-Origin, was an die API-Ebene und sehen. Ich hoffe, es funktioniert 🙂
sagen Sie mir, ob es funktioniert, wenn es nicht funktioniert, fügen Sie einen screenshot der Fehler, danke!
es funktioniert nicht für mich .... Ich bin versucht zu rufen, elasticsearch-Server vom Tomcat-JSP-Seite, gehostet auf meinem laptop und immer die Fehler. Ich habe versucht, auch Header: { 'Access-Control-Allow-Origin': '*' }, aber ohne Erfolg

InformationsquelleAutor apelidoko

Wenn Sie mit NodeJs für Ihre server-Seite, nur fügen Sie diese zu Ihrer route, und Sie werden Ok

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

Ihre route wird dann irgendwie so Aussehen

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

});

Clientseite für die Ajax-Aufruf

 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>

Sollten Sie etwas wie dies in Ihrer browser-Konsole als Antwort

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

Genießen Kodierung....

InformationsquelleAutor Odin

0

Bewusst sein, constant verwenden HTTPS oder HTTP für alle Anforderungen.
Ich hatte den gleichen Fehler msg:
"Nein" Access-Control-Allow-Origin' - header vorhanden ist, auf die angeforderte Ressource."

InformationsquelleAutor Daniel Stahl

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.