web-dev-qa-db-fra.com

Vue Politique Axios CORS: Pas de 'Access-Control-Allow-Origin'

Je construis une application, utilisez vue et codeigniter, mais j'ai un problème lorsque j'essaye d'obtenir une API, j'ai cette erreur sur la console

Access to XMLHttpRequest at 'http://localhost:8888/project/login' 
from Origin 'http://localhost:8080' has been blocked by CORS policy: 
Request header field access-control-allow-Origin is not allowed 
by Access-Control-Allow-Headers in preflight response.

J'ai essayé comme ça sur le front-end (main.js)

axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

et cela sur le backend (contrôleur)

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");

et vue méthode de connexion

this.axios.post('http://localhost:8888/project/login', this.data, {
   headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token"
        }
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err.response);
      });

J'ai cherché et essayé dans stackoverflow mais ne fonctionne pas, comment puis-je le résoudre? je vous remercie beaucoup pour votre aide

jsonvue.jsaxios
7
Ashtav

dans mon cas, curl && postman fonctionne mais pas vue axios.post

L'accès à XMLHttpRequest à ' http: // %%%%: 9200/lead/_search ' à partir de l'origine ' http: //%%%%.local ' a été bloqué par la stratégie CORS: le champ d'en-tête de demande access-control-allow-Origin n'est pas autorisé par Access-Control-Allow-Headers dans la réponse de contrôle en amont.

Donc, le problème est du côté vue pas du serveur!

La réponse du serveur contient l'en-tête "access-control-allow-Origin: *"

1
Sil2

Cela peut se produire si vous essayez d'appeler un autre hôte pour ex- Vous Vue L'application s'exécute sur localhost: 8080 mais votre API de backend s'exécute sur http: // localhost: 8888 Dans cette situation, axios demande la recherche de cet hôte local: 8080/project/login au lieu de cela http: // localhost: 8888/project/login

Pour résoudre ce problème, vous devez créer un proxy dans votre application vue

Suivez ces instructions Créez le fichier js vue.config.js ou webpack.config.js si vous ne l'avez pas encore dans le dossier racine

puis inclure ci-dessous

module.exports = {
 devServer: {
     proxy: 'https://localhost:8888'
 } }

Si vous avez besoin de plusieurs backends, utilisez ci-dessous

module.exports = {
devServer: {
    proxy: {
        '/V1': {
            target: 'http://localhost:8888',
            changeOrigin: true,
            pathRewrite: {
                '^/V1': ''
            }
        },
        '/V2': {
            target: 'https://loclhost:4437',
            changeOrigin: true,
            pathRewrite: {
                '^/V2': ''
            }
        },

    }
}

Si vous sélectionnez le second devant le point final, utilisez l'ex V1 ou V2 - votre point final est/project/login avant d'utiliser V1/project/login ou V2/project/login selon l'hôte

0
Chameera W. Ashan