La SCRO erreur, même après le réglage de Access-Control-Allow-Origin sur le côté client

J'ai une Vue de l'application générée avec webpack-simple option. Je suis en train de faire un GET demande à https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en mais j'obtiens l'erreur:

XMLHttpRequest ne peut pas charger
https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en.
Réponse à la demande de contrôle en amont ne passent pas de contrôle d'accès: Aucun
"Access-Control-Allow-Origin' en-tête est présent sur le demandé
de la ressource. Origine " http://127.0.0.1:8080 ' est donc pas permis
d'accès.

Je suis en utilisant la vue-des ressources et ont ajouté:

Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'

Qui n'a pas d'effet.

J'ai aussi ajouté ceci dans le devServer option dans le webpack.config.js:

devServer: {
  historyApiFallback: true,
  noInfo: true,
  headers: {
    "Access-Control-Allow-Origin": "*"
  }
}

Qui n'est pas de résoudre le problème, le message d'erreur reste le même.

Comment résoudre ce problème?

OriginalL'auteur wrahim | 2017-05-28

  1. 15

    Access-Control-Allow-Origin est un réponse en-tête du serveur, la demande est transmise doit envoyer.

    Mais https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en n'envoie pas le Access-Control-Allow-Origin de l'en —tête vous devez plutôt faire la demande via un proxy. Le faire en changeant votre frontend du code JavaScript pour utiliser cette URL:

    https://cors-anywhere.herokuapp.com/https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en

    Essayer ça et votre frontend code fonctionne comme prévu. Mais assurez-vous d'abord supprimer ce:

    Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'

    Qui est de l'ajout de la Access-Control-Allow-Origin en-tête de la demande, comme un en-tête de requête. Mais comme mentionné ci-dessus, Access-Control-Allow-Origin est un réponse en-tête. Donc, le seul effet que vous rencontrez en ajoutant Access-Control-Allow-Origin à la demande, c'est que vous êtes le déclenchement de votre navigateur pour envoyer un CORS de contrôle en amont OPTIONS demande plutôt que d'envoyer votre GET.

    Et d'ailleurs vous pouvez également supprimer ce:

    headers: {
  "Access-Control-Allow-Origin": "*"
}

    Tout ce qui semble être de faire est d'ajouter le Access-Control-Allow-Origin en-tête de réponse à des réponses à partir de votre propre serveur de backend. Mais la demande de votre frontend code est prise n'est pas d'aller à votre propre serveur backend—au lieu de cela il va https://api.forismatic.com/.

    De toute façon, le https://cors-anywhere.herokuapp.com/https://api.forismatic.com/… URL sera la cause de la demande d' https://cors-anywhere.herokuapp.com, un open/public de la SCRO proxy qui envoie la demande à https://api.forismatic.com/api/1.0/?method=getQuote….

    Et lorsque le proxy reçoit la réponse, il va le prendre et ajouter le Access-Control-Allow-Origin en-tête de réponse à cela et de passer ensuite que, de retour à votre requérant frontend code de la réponse.

    Que la réponse à la Access-Control-Allow-Origin en-tête de réponse est ce que le navigateur voit, de sorte que le message d'erreur du navigateur vous affiche maintenant s'en va, et le navigateur permet à votre frontend JavaScript code pour accéder à la réponse.

    Ou utiliser le code de https://github.com/Rob--W/cors-anywhere/ ou de tel pour mettre en place votre propre proxy.

    La raison vous avez besoin d'un proxy est, https://api.forismatic.com/api/1.0/?method=getQuote… lui-même n'envoie pas le Access-Control-Allow-Origin en-tête de réponse, de sorte que votre navigateur refuse de laisser votre frontend JavaScript code d'accès une réponse à partir de ce serveur cross-origin.

    https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS a plus de détails.

    J'avais remarque que cors-anywhere.herokuapp.com est un décent temporaire la solution, mais pas celle que vous voulez utiliser dans la production, comme cela peut impliquer de passer des données sensibles par le biais de quelqu'un d'autre application.
    Vrai, mais dans ce cas, la demande est simple à OBTENIR, sans informations d'identification, ce qui semble être à la disposition du public un service qui envoie en retour des citations aléatoires. Ainsi, dans le cas, la procuration est juste un moyen de contourner le fait que les fournisseurs de service ne sont pas prendre la peine d'ajouter le Access-Control-Allow-Origin-tête de réponse les réponses eux-mêmes. Il ne semble pas être une bonne raison pour qu'ils ne pouvaient pas être...

    OriginalL'auteur sideshowbarker