web-dev-qa-db-fra.com

Problème CORS avec Vue.js

J'utilise:

  • Vue 2.0.3
  • vue-router 2.0.1
  • vuex 0.8.2
  • vue-resource 0.7.0

Et après avoir essayé de me connecter à ma page lors de l’utilisation de l’API distante, et non celle localement exécutée, j’obtiens une erreur cors semblable à celle qui suit.

vue-resource.common.js?2f13:1074 OPTIONS 

https://mywebsite/api/auth/login 

(anonymous function) @     vue-resource.common.js?2f13:1074
Promise$1            @     vue-resource.common.js?2f13:681
xhrClient            @     vue-resource.common.js?2f13:1033
Client               @     vue-resource.common.js?2f13:1080
(anonymous function) @     vue-resource.common.js?2f13:1008


XMLHttpRequest cannot load https://mywebsite/api/auth/login. 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:8080' is therefore not allowed 
access. The response had HTTP status code 415.

Maintenant, j’ai une API exécutée dans Azure et, comme elle me permet de tester mes appels de Postman, je suis pratiquement certaine que les en-têtes CORS sont correctement configurés sur le backend .

J'ai une situation comme celle-ci dans les fichiers de configuration:

export const API_ROOT = 'https://mywebsite/api/'
export const AuthResource = Vue.resource(API_ROOT + 'auth{/action}')

que j’appelle cette action comme:

login: function (userData) {
    return AuthResource.save({action: 'login'}, userData)
}

Enfin, alors que je vérifie l’authentification lors de la connexion via un jeton dans le sous-module Vuex, j’ai Un simple état de vérification de l’en-tête.

var updateAuthHeaders = () => {
    var token = JSON.parse(localStorage.getItem("auth_token"))
    if (token != null){
        Vue.http.headers.common['Authorization'] = token
    }else{
        Vue.http.headers.common['Authorization'] = null
    }
}

J'ai essayé d'ajouter Vue.http.headers.common['Access-Control-Allow-Origin'] = true ici, mais je n'ai pas résolu le problème.

Une idée? Qu'est-ce que je fais mal .. Je suppose que cela ne fonctionnera pas pour les autres appels, même s'il ne fonctionne pas pour la connexion.

javascriptazurevue.jsvue-resource
4
desicne

1) Assurez-vous que serveur envoie l'en-tête Access-Control-Allow-Origin "*".

2) Vue.http.headers.common['Access-Control-Allow-Origin'] = true, Vue.http.headers.common['Access-Control-Allow-Origin'] = '*' et etc. ne sont pas nécessaires dans la requête client .

3) Vue.http.options.emulateJSON = true devrait aider si 1 et 2 points sont déjà bons, mais vue-resource échoue avec status 0. Essayez également de supprimer (s’ils existent) Vue.http.options.credentials = true et Vue.http.options.emulateHTTP = true.

3
Nickensoul

Vous pouvez ajouter Access-Control-Allow-Origin: * à votre réponse server (dans ce cas, IIS), mais cela est vivement déconseillé.

Ce qui se passe ici, c'est que votre client est http://localhost et qu'il tente d'accéder à https://mywebsite/api/, ce qui signifie qu'ils ne sont pas du même Origin.

Si vous ajoutez Access-Control-Allow-Origin: *, vous autoriserez le monde entier à atteindre votre point de terminaison API.

Je vous suggèrerais de créer votre ___ en-tête de contrôle d'accès serveurAccess-Control-Allow-Origin: *.mysite et de créer un vhost pour que votre localhost utilise dev.mysite ou similaire.

Cela permettra à votre "hôte local" d'accéder à votre API sans problème.

Vous pouvez également ajouter localhost à une liste blanche, mais ceci n’est pas non plus sans conséquences sur le plan de la sécurité, et cela ne fonctionne pas partout de toute façon.

Donc, en bref, créez un hôte virtuel pour votre hôte local situé dans le même domaine que votre service REST et votre problème devrait être résolu.

Une fois que vous avez démarré, vous devriez supprimer la partie *.mysite et utiliser un domaine aussi spécifique que possible sur votre liste blanche.

Bonne chance!

3
darryn.ten

Une plus grande possibilité est que CORS n'est pas activé sur IIS. Cela peut être activé en modifiant le fichier web.config dans le dossier racine de l'application dans IIS comme suit:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
   <httpProtocol>
         <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
         </customHeaders>
   </httpProtocol>

</system.webServer>
</configuration>

Remarque : Cette méthode permet à quiconque d'atteindre le point de terminaison de l'API et ne devrait donc pas être adoptée dans un environnement de production, mais uniquement dans un environnement de développement.

2
Parthipan Natkunam

Ou vous pouvez le contourner à des fins de développement en utilisant l’extension chrome CORS. Fonctionne avec codesandbox

0
xmp