Wie erstelle ich eine domainübergreifende Anfrage (Angular 2)?

Question

Wie erstellt domänenübergreifende Anfrage mit Angular 2? Können Sie ein Beispiel geben? Anfrage zwischen localhost: 3000 und localhost: 8000 Cross-Domain? Danke.

Answer 1

Tatsächlich gibt es in Angular2 nichts, was domänenübergreifende Anfragen betrifft. CORS wird von Browsern nativ unterstützt. Dieser Link könnten Ihnen helfen zu verstehen, wie es funktioniert:

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/

kurz zu sein, im Fall von Cross-Domain-Anfrage, fügt der Browser automatisch ein Origin-Header in der Anfrage . Es gibt zwei Fälle:

• Einfache Anfragen. Dieser Anwendungsfall gilt, wenn wir die Methoden HTTP GET, HEAD und POST verwenden. Im Fall von POST-Methoden werden nur Inhaltstypen mit den folgenden Werten unterstützt: text/plain, application/x-www-form-urlencoded und multipart/form-data.
• Vorbeleuchtete Anfragen. Wenn der Anwendungsfall "Einfache Anforderungen" nicht zutrifft, wird eine erste Anforderung (mit der HTTP OPTIONS-Methode) ausgeführt, um zu prüfen, was im Zusammenhang mit domänenübergreifenden Anforderungen durchgeführt werden kann.

In der Tat muss die meiste Arbeit auf der Serverseite getan werden, um die CORS-Header zurückzugeben. Der wichtigste ist der Access-Control-Allow-Origin.

Um solche Probleme zu beheben, können Sie Entwickler-Tools in Browsern (Registerkarte Netzwerk) verwenden.

In Bezug auf Angular2, verwenden Sie einfach die Http Objekt wie alle anderen Anfragen (gleiche Domain zum Beispiel):

return this.http.get('https://angular2.apispark.net/v1/companies/') 
      .map(res => res.json()).subscribe(
    ... 
); 

Answer 2

Für mich ist es ein weiteres Problem war. Das könnte für einige trivial sein, aber ich brauchte eine Weile, um es herauszufinden. Diese Antwort könnte für einige hilfreich sein.

Ich hatte meine API_BASE_URL auf localhost:58577 gesetzt. Die Münze löste sich nach dem milliardsten Lesen der Fehlermeldung. Das Problem ist in dem Teil, wo es besagt, dass es nur HTTP und einige andere Protokolle unterstützt. Ich musste das API_BASE_URL so ändern, dass es das Protokoll einschließt. So änderte API_BASE_URL zu http://localhost:58577 es funktionierte perfekt.

Answer 3

Es ist nichts, was Sie auf der Client-Seite tun können. Ich habe @CrossOrigin in den Controller auf der Serverseite hinzugefügt und es funktioniert.

@RestController 
@CrossOrigin(origins = "*") 
public class MyController 

Bitte beziehen Sie sich auf docs.

Lin

Answer 4

@RestController 
@RequestMapping(value = "/profile") 
@CrossOrigin(origins="*") 
public class UserProfileController { 

SpringREST bietet @CrossOrigin Annotationen wo (Ursprüngen = "*") aus jeder Quelle Zugriff auf REST APIS ermöglichen.

Wir können es der jeweiligen API oder dem gesamten RestController hinzufügen.

Answer 5

Viele lange (und korrekte) Antworten hier. Aber normalerweise werden Sie diese Dinge nicht manuell tun - zumindest nicht, wenn Sie Ihre ersten Projekte für die Entwicklung einrichten (hier stolpern Sie normalerweise über diese Dinge). Wenn Sie koa für das Backend verwenden: Verwenden Sie koa-cors. Installieren Sie über npm ...

npm install --save koa-cors 

... und verwenden Sie es im Code:

const cors = require('koa-cors'); 
const Koa = require('koa'); 
const app = new Koa(); 
app.use(cors()); 

Problem gelöst.

Answer 6

Nach meiner Erfahrung arbeitete die Plugins mit http, aber nicht mit dem neuesten httpClient. Auch die Konfiguration der CORS-Antwort-Header auf dem Server war nicht wirklich eine Option. Also habe ich eine proxy.conf.json-Datei erstellt, die als Proxy-Server fungiert.

mehr das Lesen Sie hier: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

unten ist mein prox.conf.json Datei

{ 
    "/posts": { 
    "target": "https://example.com", 
    "secure": true, 
    "pathRewrite": { 
    "^/posts": "" 
    }, 
    "changeOrigin": true 
    } 
} 

ich die proxy.conf.json Datei direkt neben der die package.json platziert Datei im selben Verzeichnis

dann änderte ich den Startbefehl in der package.json Datei wie unten

"start": "ng serve --proxy-config proxy.conf.json" 

jetzt ist der http Anruf von meiner App-Komponente als

return this._http.get('/posts/pictures?method=GetPictures') 
.subscribe((returnedStuff) => { 
    console.log(returnedStuff); 
}); 

folgt schließlich meine app zu laufen, würde ich npm verwenden beginnen oder ng dienen --proxy -config proxy.conf.json