Ionic 3 - POST Daten zu Heroku Endpoint

Ich habe also einen Back-End-Service auf Heroku am Endpunkt https://sample.herokuapp.com/ ausgeführt. Ich versuche, das folgende JSON-Objekt an den /bug/ Endpunkt POST:Ionic 3 - POST Daten zu Heroku Endpoint

{ 
    "email": "[email protected]", 
    "name": "Anthony", 
    "text": "Test Bug", 
    "picture": "Empty" 
}

Wenn ich diese Daten in Insomnia POST oder Postman, es funktioniert perfekt und gibt eine HTML-Antwort mit den analysierten Informationen. Allerdings wenn ich diese Daten Post 3 den folgenden Code in Ionic Verwendung

sendMail(type:string, text:string):void { 
      this.nativeStorage.getItem('sample').then((sample) => { 
        var data = new Object(); 
        data["name"] = sample.name 
        data["email"] = sample.email; 
        data["picture"] = sample.picture; 
        data["text"] = text; 

        this.db.object('/general/sample').take(1).subscribe((sample) => { 
         var xhr = new XMLHttpRequest(); 
         var endpoint = sample.address + sample.endpoints[type]; 

         xhr.addEventListener("readystatechange", function() { 
         if (this.readyState === 4) { 
          console.log("Got response: " + this.responseText); 
         } 
        }); 

         xhr.open("POST", endpoint); 
         xhr.setRequestHeader("Accept", "application/json"); 
        xhr.setRequestHeader("Content-Type", "application/json"); 
         console.log("sample sending: " + JSON.stringify(data, undefined, 2)); 
         console.log("sample endpoint: " + endpoint); 

        xhr.send(JSON.stringify(data)); 
        }) 
      }) 
    }

Ich erhielt folgende Fehlerprotokoll in Heroku:

2017-07-05T17:02:24.707431+00:00 heroku[router]: at=info method=OPTIONS path="/bug" host=sample.herokuapp.com request_id=5e679c8e-cac7-4ff2-9277-dec80a250c11 fwd="150.108.242.198" dyno=web.1 connect=1ms service=3ms status=200 bytes=215 protocol=https

ich zu diesem Thema viel Forschung getan haben und ich glaube, das ist ein CORS-Problem. Ich habe jedoch versucht, die Access-Control-Allow-... Header zu verwenden, um dieses Problem zu beheben, aber die gleichen Fehler erhalten.

Ich habe das Cordova whitelist Plugin installiert und das meta Tag an meine index.html angeschlossen.

Dies ist ein ziemlich kompliziertes Thema, also schätze ich all die Hilfe!

Quelle

2017-07-05 Anthony Krivonos

Nur frage mich, warum nicht eckig Objekt Http verwenden? Ich habe Code mit Heroku und ich habe keine Probleme. Ich setze meine Controller so ein, dass sie mit einem Http-Objekt injiziert werden und verwende das in meinen Methoden, um Ruhe-Anrufe zu machen. – getbuckts

Danke für den Vorschlag, aber ich habe versucht HttpModule und ich habe immer noch das gleiche Problem in Heroku. Irgendwelche Ideen, warum das so sein könnte? –

Auf der Heroku-Seite haben Sie Cors konfiguriert?

var app = express(); 
/* cors conig */ 
var corOptions = { 
    "origin": "*", 
    "methods": "GET,HEAD,PUT,PATCH,POST,DELETE", 
    "preflightContinue": true, 
    allowedHeaders: 'Content-Type,Authorization,X-Requested-With' 
} 
app.use(cors(corOptions));

meine cors Abhängigkeit: "cors": "^ 2.8.1"

Quelle

2017-07-05 18:16:39 getbuckts

Das hat es für mich getan. Vielen Dank! –

Ionic 3 - POST Daten zu Heroku Endpoint

Antwort

Verwandte Themen