Ausgabe CORS in Webpack

Question

Ich habe ein Angular2/webpack Projekt, dass, wenn ich mache HTTP-Anforderungen (zB Google Trends aus http://hawttrends.appspot.com/api/terms/ bekommen), reagiert es mit dem folgenden Fehler:

XMLHttpRequest cannot load http://hawttrends.appspot.com/api/terms/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

habe ich versucht, jede einzelne Lösung die in SO oder im Webpack-Repository angeboten werden. Einschließlich der webpack.config.js Modifizieren und das Hinzufügen von erforderlichen Header manuell oder das Hinzufügen von Header auf meine Anfrage in meinem Winkelcode usw.

# webpack.config.js

devServer: { historyApiFallback: true, watchOptions: { aggregateTimeout: 300, poll: 1000 }, headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS", "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization" } }, Aber bisher kein Glück.

Die seltsame Sache ist, wenn ich den Code und überprüfen Sie die Registerkarte Netzwerk I der Statuscode 200 sehen inspizieren:

http://i.stack.imgur.com/k8Dir.png

Aber die Konsole zeigt den Fehler, den ich bereits erwähnt.

Die andere Sache, erwähnenswert ist, wenn ich die gleiche URL durch Yahoo APIs anfordern, es funktioniert gut und ich bekomme keine Fehler in meiner Konsole:

https://query.yahooapis.com/v1/public/yql?q=select%20*%20%20from%20json%20where%20url%3D%22http%3A%2F%2Fhawttrends.appspot.com%2Fapi%2Fterms%2F%22&format=json&diagnostics=true&callback= 

Es ist das gleiche Projekt mit zwei unterschiedlichen Ansätzen ist. Für mich ist es wie Orte wie Yahoo Api kann CORS Anforderungen und Webpack kann das nicht tun. Habe ich recht? Ich frage mich, ob jemand freundlich genug ist zu erklären, warum das passiert und wie man es umgeht. Danke.

p.s. Ich würde gerne yahoo apis in meinem Projekt verwenden, aber die Sache ist es neu orientiert und vermasselt die JSON-Antwort ein wenig, was nicht ideal ist. Außerdem interessiere ich mich mehr für die Ursache dieses Problems und die Art und Weise, wie wir es beheben können.

Edit: Es stellte sich heraus, dass CORS und JSONP nicht in hawttrends.appspot.com/api/terms/ unterstützt würde ich tief apprecieted, wenn jemand mir zeigen, wie sonst kann ich die json Inhalt dieser URL bekommen in meinem Winkel 2 Code. tx

Answer 1

Versuchen Sie, Access-Control-Allow-Origin auf Ihrem Backend auf * zu setzen.