web-dev-qa-db-fra.com

La demande de la SCRO n'a pas abouti

J'ai un problème lorsque je veux créer un système d'authentification en utilisant VueJs comme interface (http://localhost:8080/#/login) et Laravel 5.6 comme interface. Lorsque j'essaie de soumettre un formulaire de connexion à l'aide de l'URL de connexion à l'API http://127.0.0.1:8000/api/v1/login, le message d'erreur suivant s'affiche:

Demande d'origine croisée bloquée: la règle de même origine est interdite lecture de la ressource distante à http://127.0.0.1:8000/api/v1/login . (Raison: la demande CORS n'a pas abouti).

Je ne sais pas comment résoudre ce problème.

Est-ce que quelqu'un ici pourrait m'aider à résoudre mon problème?

NOTE: Je dois installer laravel-cors avant

laravelvue.js
1
Shinoda_

Vous devez utiliser localhost ou 127.0.0.1 pour toutes les demandes. En général, dans votre code, vous devez appeler le serveur en ajoutant simplement l'URI à l'hôte actuel, sans rajouter l'hôte et le port dans la chaîne de l'URI. Si vous chargez votre page à partir d'un hôte donné, par exemple 127.0.0.1 et tentez ensuite d'envoyer une demande AJAX à un autre hôte, par exemple www.Host.com, la demande est bloquée pour empêcher les attaques XSS

2
zizzo

Le partage de ressources d'origine croisée est un mécanisme qui utilise des en-têtes HTTP supplémentaires pour indiquer à un navigateur d'autoriser l'application Web exécutée sur un serveur d'origine (client) à accéder aux ressources sélectionnées à partir d'un serveur appartenant à un serveur d'origine différent.

En gros, votre application Vue ( http: // localhost: 8080 ) doit être autorisée à accéder à votre point de terminaison Laravel ( http://127.0.0.1:8000/api/v1/login ) Ceci m'empêche de frapper votre terminal Laravel depuis mon site Web malveillant et d’agir comme un utilisateur authentifié.

Sur la base de docs , vous devez ajouter 'allowedOrigins' => ['*'],, mais cela signifie que vous ouvrez votre backend à toutes les demandes. C'est bien s'il s'agit d'une API publique, mais dans ce contexte, cela ne semble pas vouloir. Dans ce cas, il s'agira plutôt de 'allowedOrigins' => ['localhost:8080'], afin que votre application Vue puisse consommer votre serveur Laravel.

1
Dan Hilton

Dans mon cas, l'ordinateur n'affichait pas la date et l'heure correctes. Lorsque j'essaie de voir la page, je reçois la "demande CORS n'a pas abouti". Une fois que j'ai mis à jour l'heure et la date correctes, la page s'est affichée normalement.

0
Eddy

On dirait que vous utilisez actuellement ceci en mode dev via webpack? Si cela est correct et que votre flux de travail indique que vous allez créer l’application Vue et la faire cohabiter avec votre serveur Laravel, il vous suffit de mettre à jour config/index.js pour avoir une entrée proxyTable qui transmet les requêtes dev Laravel serveur principal.

Cela ressemblerait à quelque chose comme ça.

module.exports = {
  dev: {
    proxyTable: {
      "/": "http://127.0.0.1:8000/api/v1/login"
    }
  }
}

Il existe des informations supplémentaires disponibles sur la façon dont cela fonctionne. https://vuejs-templates.github.io/webpack/proxy.html

0
bigtunacan