it-swarm.com.de

Das Feld für das Anforderungsheader X-CSRF-TOKEN ist für Access-Control-Allow-Header nicht zulässig

Ich mache eine Get-Anfrage für embed.rock mit Vue und Axios.

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

Wenn ich ein CDN verwende, um Vue und Axios mit einem Inline-Skript zu erhalten, funktioniert mein Code gut und ich bekomme eine Antwort zurück.

Wenn ich mit einem externen Skript auf die installierten vue- und axios-Skripts verweise, wird der Code nicht mehr ausgeführt und ich erhalte die folgende Fehlermeldung:

Fehler beim Laden von https://api.embed.rocks/api?url=https://www.youtube.com/watch?v=DJ6PD_jBtU0&t=4s : Das Headerfeld "Request" X-CSRF-TOKEN ist nicht zulässig von Access-Control-Allow-Headern in der Preflight-Antwort.

Wenn ich auf den Fehler in der Konsole klicke, komme ich einfach zu: 

<!DOCTYPE html>
3
user3325126

Laravel stellt eine globale Konfiguration ein, um den X-CSRF-TOKEN automatisch in die Header der Anforderung in Ihrer bootstrap.js-Datei aufzunehmen.

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');
}

Wenn Sie also das Token entfernen möchten, können Sie es folgendermaßen erreichen:

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

das Problem ist, dass das CSRF-Token standardmäßig als gemeinsamer Header bei Axios registriert wird, so dass dieses Problem lösen kann:

1- Ersetzen Sie diese Zeilen in 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');
}

von dieser Linie

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

2 Installieren Sie das qs-Modul über npm ..... unter Verwendung des Links: https://www.npmjs.com/package/qs

3- Definiere const von qs wie folgt: Const qs = requir ('qs');

4- Gebrauch Axios durch Defultation wie folgt:

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