La SCRO problème avec Vue.js
Je suis en utilisant:
- Vue 2.0.3
- vue-routeur 2.0.1
- vuex 0.8.2
- vue des ressources 0.7.0
Et après j'essaie de me connecter à ma page lors de l'utilisation d'API à distance, de ne pas l'exécuter localement un, je reçois de la scro d'erreur comme 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 l'API d'exécution dans Azure, et puisqu'il me permet de tester mes appels de Facteur, je suis tout à fait sûr de la SCRO en-têtes sont correctement définis sur le backend.
Pas si sûr au sujet de la Vue et de l'avant.
J'ai ce genre de situation dans les fichiers de config:
export const API_ROOT = 'https://mywebsite/api/'
export const AuthResource = Vue.resource(API_ROOT + 'auth{/action}')
que je.e je suis à l'appel de cette action comme:
login: function (userData) {
return AuthResource.save({action: 'login'}, userData)
}
Enfin comme je suis vérification auth login via token dans vuex sous-module, j'ai
juste un simple en-tête de la vérification de l'état.
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 n'aide pas le cas.
Une idée? Ce que je fais mal.. je suppose qu'il ne fonctionnera pas pour les autres appels aussi si cela ne fonctionne pas pour vous connecter.
- Ce ne semble pas être une question de la SCRO (comme indiqué par les 415 erreur) et il n'y a rien de mal avec votre code de client-end. Pourriez-vous fournir votre code de clé extrait de votre backend?
- vous étiez tout à fait raison! Il y avait mon problème avec l'API du projet ne permettant pas l'accès de la JS à l'intérieur des navigateurs
- pouvez-vous dire quelle était votre question?
- n'était pas avant la fin de l'émission. L'installation du serveur n'a pas été fait droit à l'époque.
Vous devez vous connecter pour publier un commentaire.
Alors que vous pouvez ajouter
Access-Control-Allow-Origin: *
à votre serveur réponse (dans ce cas, IIS), mais c'est très déconseillé.Ce qui se passe ici est que votre client est
http://localhost
et il est en train d'essayer d'accéder àhttps://mywebsite/api/
ce qui signifie qu'ils ne sont pas de la même origineSi vous ajoutez
Access-Control-Allow-Origin: *
vous serez en permettant au monde entier de frapper votre API point de terminaison.Je suggère de faire votre contrôle d'accès serveur les en-têtes de
Access-Control-Allow-Origin: *.mysite
et de faire un vhost pour votrelocalhost
à utiliserdev.mysite
ou similaire.Cela permettra à votre "localhost" pour accéder à votre API sans problèmes.
Vous pouvez également ajouter
localhost
à une liste blanche, mais cela n'est pas sans ses propres implications en matière de sécurité, et il ne fonctionne pas partout de toute façon.Donc, en bref, faire un vhost pour votre localhost c'est dans le même domaine que votre REPOS et de votre problème devrait être résolu.
Une fois que vous allez vivre, vous devez supprimer le
*.mysite
partie et l'utiliser comme spécifiques à un domaine que possible sur votre liste blanche.Bonne chance!
Une plus grande possibilité est que la SCRO n'est pas activé sur le serveur IIS. Cela peut être activée en modifiant le web.fichier de config dans le dossier racine d'une application dans IIS comme suit:
Note: Cette méthode permettra à une personne d'atteindre l'API de point de terminaison, et donc ne devrait pas être adopté sur un environnement de production, mais seulement sur un environnement de développement.
1) assurez-vous que serveur envoie
Access-Control-Allow-Origin "*"
en-tête.2)
Vue.http.headers.common['Access-Control-Allow-Origin'] = true
,Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'
et etc. n'est pas nécessaire dans le client demande.3)
Vue.http.options.emulateJSON = true
doit est utile que si 1 et 2 points sont ok, mais vue-ressource échoue avecstatus 0
. Aussi, essayez de le supprimer (si elles existent)Vue.http.options.credentials = true
etVue.http.options.emulateHTTP = true
.Ou vous pouvez l'ignorer pour des fins de développement par l'aide de chrome extension de la SCRO. Fonctionne avec codesandbox
Vous faire face à cette erreur lors de l'API url et url clientes ne sont pas les mêmes. Vue de la CLI 3 (et dans le coeur, Webpack) vous permet de proxy de votre API url de votre client url.
À l'intérieur de
vue.config.js
fichier ajouter les lignes suivantes:Puis envoyez vos appels ajax pour
http://localhost/api/
.Vous pouvez lire l'article complet ici:
La façon de traiter avec de la SCRO erreur sur la Vue de la CLI 3?