Ember AJAX DELETE Aufruf von verschiedenen Port bekommen "Nein 'Access-Control-Allow-Origin' Header ist auf der angeforderten Ressource vorhanden"

Question

Ich habe eine Ember-Anwendung und ich versuche, eine DELETE-Anfrage auf 'klicken' von a Komponente (an die Route gesendet). Der Server hat einen anderen Port als die Benutzerschnittstelle.

Dies ist die Ajax-Anforderung auf der Strecke:

  deleteAlert(alert) { 
      let self = this; 
      Ember.$.ajax({ 
       url: 'http://example.com:4320/data/alerts/' + alert.id, 
       type: 'DELETE', 
       beforeSend: function(request) 
       { 
        request.setRequestHeader("Access-Control-Allow-Origin","example.com:4301"); 
        request.setRequestHeader("Access-Control-Allow-Methods","GET,POST,OPTIONS,PATCH,DELETE,PUT"); 
       }, 
       success: function (response) { 
        if(response.status==='Success!') { 
         Ember.Logger.log(response); 
        } 
       }, 
       error: function(jqXHR, textStatus, errorThrown) { 
        Ember.Logger.error(textStatus, errorThrown, jqXHR); 
       } 
      }); 

ich die folgende Störung erhalte, aber:

XMLHttpRequest cannot load http://example.com:4320/data/alerts/252. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com:4301' is therefore not allowed access. The response had HTTP status code 404. 

Ich habe auch versucht, "*" auf die ‚Access-Control Hinzufügen "Null-Origin" -Header sowie Definition der Header auf folgende Weise (außerhalb der Funktion "vor dem Senden"):

  deleteAlert(alert) { 
      let self = this; 
      Ember.$.ajax({ 
       url: 'http://example.com:4320/data/alerts/' + alert.id, 
       type: 'DELETE', 
       headers: { 
        'Access-Control-Allow-Origin':'http://example.com:4301', 
        'Access-Control-Allow-Methods':'GET,POST,OPTIONS,PATCH,DELETE,PUT', 
       }, 
       success: function (response) { 
        if(response.status==='Success!') { 
         Ember.Logger.log(response); 
        } 
       }, 
       error: function(jqXHR, textStatus, errorThrown) { 
        Ember.Logger.error(textStatus, errorThrown, jqXHR); 
       } 
      }); 

Gleicher Fehler.

Ist das etwas, das auf der Serverseite behoben werden muss? Ich habe keine Probleme mit POST oder GET-Anfragen, nur DELETE bis jetzt.

Jede Hilfe wird geschätzt!

Answer 1

Ich denke, das ist ein Problem mit Ember, da ich keine Probleme mit anderen Methoden hatte (GET, POST). Ich änderte einfach die API-Methode zu POST und hatte keine Probleme damit, es so zu benutzen. Dies ist wahrscheinlich nicht die beste Lösung, sondern eher eine Art Workaround. Ich bin sicher, Ember hätte kein Problem mit DELETE, wenn ich Ember Data benutzt hätte.

Answer 2

request.setRequestHeader("Access-Control-Allow-Origin", "example.com:4301"); 
request.setRequestHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PATCH,DELETE,PUT"); 

Diese Header sind nicht für den Client! Ihr Server muss diese Header festlegen.

Fügen Sie diese Berechtigungen Ihrem API-Server hinzu. (die auf example.com: 4320 serviert wird)