web-dev-qa-db-fra.com

Le champ d'en-tête de demande X-CSRF-TOKEN n'est pas autorisé par Access-Control-Allow-Headers

Je fais une demande get pour intégrer.rock en utilisant vue et axios.

axios({
  method: 'get',
  url: 'https://api.embed.rocks/api?url=' + this.url,
  headers: {
      'x-api-key': 'my-key'
  }
})

Lorsque j'utilise un CDN pour obtenir une vue et axios avec un script en ligne, mon code fonctionne bien et je reçois une réponse.

Lorsque je référence les vues installées et axios avec un script externe, le code ne s'exécute plus et le message d'erreur suivant s'affiche:

Impossible de charger https://api.embed.rocks/api?url=https://www.youtube.com/watch?v=DJ6PD_jBtU0&t=4s : Le champ d'en-tête de demande X-CSRF-TOKEN n'est pas autorisé par Access-Control-Allow-Headers dans la réponse de contrôle en amont.

Lorsque je clique sur l'erreur dans la console, cela m'amène à: 

<!DOCTYPE html>
laravelvue.jsembedaxios
3
user3325126

Laravel est en train de définir une configuration globale pour inclure automatiquement le X-CSRF-TOKEN dans les en-têtes de la requête de votre fichier bootstrap.js.

let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

Par conséquent, si vous souhaitez supprimer le jeton, vous pouvez le réaliser comme suit:

var instance = axios.create();
delete instance.defaults.headers.common['X-CSRF-TOKEN'];

instance({
    method: 'get',
    url: 'https://api.embed.rocks/api?url=' + this.url,
    headers: {
        'x-api-key': 'my-key'
    }
});
5
Chin Leung

le problème est que, par défaut, le jeton CSRF est enregistré comme en-tête commun avec Axios sopour résoudre ce problème:

1- remplacez ces lignes dans bootstrap.js

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf- 
token');
}

par cette ligne

window.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2- installer le module qs par npm ..... en utilisant le lien: https://www.npmjs.com/package/qs

3- définissez const of qs comme ci-dessous: const qs = require ('qs');

4- utilisez axios par défaut comme ceci:

axios.post('your link here ',qs.stringify({
  'a1': 'b1',
  'a2 ':'b2'
}))
.then(response => {alert('ok');})
.catch(error => alert(error));
0
Taif Raoof