Wie verbinde ich meinen Server mit meinem Ember CLI App

Question

mein Server arbeitet auf dem Port: 3000 und ich benutze Knoten, Express auf der Serverseite und das funktioniert gut, während mit Curl oder REST-Client.

ember cli Server arbeitet auf Port: 4200

Ich habe diesen Code auf environment.js für Server an den Client zu verbinden.

contentSecurityPolicy: { 
       'default-src': "'none'", 
       'script-src': "'self' 'unsafe-inline' 'unsafe-eval'", 
       'font-src': "'self'", 
       'connect-src': "'self' http://localhost:3000", 
       'img-src': "'self'", 
       'report-uri':"'localhost'", 
       'style-src': "'self' 'unsafe-inline'", 
       'frame-src': "'none'" 
    } 

und meine Anwendung Adapter-Code ist:

import JSONAPIAdapter from 'ember-data/adapters/json-api'; 

export default JSONAPIAdapter.extend({ 
    "host": "http://localhost:3000", 
    "namespace": "api" 
}); 

auf diese Weise meine glut-Server ausgeführt wird ember Server --proxy http://127.0.0.1:3000 auf Controller verwenden i Ajax-Aufruf:

  $.ajax({ 
        type: 'POST', 
        url: '/blog', 
        contentType: 'application/json', 
        data: param, 
        processData: false, 
        success : 
       }); 

es wird ein Fehler: POST http://localhost:4200/blog 500 (Interner Serverfehler)

Ich habe all diese Dinge gemacht, aber ich weiß nicht, warum es nicht funktioniert. bitte helfen Sie mir, wenn Sie eine Idee dafür haben.

Answer 1

Sie müssen den Unterschied zwischen zwei Arten verstehen, um Ihre API zu verbinden:

Proxy

Sie die --proxy Möglichkeit ember-cli Proxy auf Ihre ember Entwicklungsserver gemacht, alle Anfragen verwenden können, sind nicht von ember zu Ihrem Backend verarbeitet.

Dies ist ein guter Weg, dies zu tun, weil Ihr Backend und Ihre Anwendung sich aus der Sicht Ihrer Anwendung und Ihres Browsers auf demselben Host befinden.

Wenn Sie dies tun, sollten Sie nicht geben Sie die host auf Ihrem Adapter oder fügen Sie Ihr Back-End zu Ihrer CSP-Konfiguration.

Sie können dies jedoch nur tun, wenn Sie in der Produktion Ihre Ember-Anwendung von Ihrem Backend aus bedienen.

CORS

Der andere Weg, um eine Verbindung zu Ihrem Backend ist Ihre Anfragen direkt an einem anderen Ursprung zu machen. Dies wird jedoch CORS Anfragen sein, so dass sie zusätzliche Konfiguration auf Ihrem Backend benötigen!

Wenn Sie Daten von einem anderen Ursprung direkt abrufen möchten, muss Ihr Server im Browser land zusätzliche HTTP Header (CORS Header) liefern.

Allerdings sollten Sie dies tun nur tun Sie dies, wenn Sie nicht Ihr Frontend von Ihrem Backend-Server in der Produktion liefern.

Wenn Sie CORS verwenden möchten, sollten Sie nicht die --proxy Flag angeben, wenn Sie ember serve laufen, aber die host angeben und Ihre CSP richtig konfigurieren.

---

Ich erwähnte auch, dass Sie eine = in Ihrem ember serve Anruf verpasst.

Es ist nicht ember server --proxy http://127.0.0.1:3000 aber ember server --proxy=http://127.0.0.1:3000!

Generell gilt: Wenn Sie ember serve --proxy=http://127.0.0.1:3000 tun dann eine HTTP AJAX GET zu http://localhost:4200/blog nennen sollte die gleiche wie http://127.0.0.1:3000/blog zurückzukehren.

Um dies zu testen, empfehle ich Ihnen, einen HTTP-Entwicklungs-Client wie this one zu verwenden.

Ich nehme an, Sie erhalten auch eine HTTP 500 auf http://127.0.0.1:3000/blog. Dann stimmt etwas in deinem Backend nicht. Vielleicht ist die richtige URI http://127.0.0.1:3000/blogs? das wäre Glut Standard.

Wenn Sie einen Anruf direkt von Ihrer Ember-Anwendung an http://127.0.0.1:3000/blogs senden, führt dies jedoch immer zu einem Fehler, wenn Sie die CORS Header nicht liefern.