web-dev-qa-db-ja.com

リクエストヘッダーフィールドX-CSRF-TOKENはAccess-Control-Allow-Headersでは許可されていません

vueとaxiosを使用して、embed.rockにgetリクエストを送信しています。

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

CDNを使用してvueおよびインラインスクリプトでaxiosを取得すると、コードは正常に機能し、応答が返されます。

インストールされたvueおよびaxiosscrptsを外部スクリプトで参照すると、コードが実行されなくなり、次のエラーが発生します。

読み込みに失敗しました https://api.embed.rocks/api?url=https://www.youtube.com/watch?v=DJ6PD_jBtU0&t=4s ：リクエストヘッダーフィールドX-CSRF-TOKEN飛行前の応答でAccess-Control-Allow-Headersによって許可されていません。

コンソールでエラーをクリックすると、次のようになります。

<!DOCTYPE html>
laravelvue.jsembedaxios
6
user3325126

Laravelは、X-CSRF-TOKENファイルのリクエストのヘッダーに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');
}

したがって、トークンを削除する場合は、次のように実行できます。

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

問題は、デフォルトでCSRFトークンがAxiosに共通ヘッダーとして登録されるため、この問題を解決することです。

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

この行で

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

2- npmによってqsモジュールをインストールします.....このリンクを使用します： https://www.npmjs.com/package/qs

3-以下のようにqsのconstを定義します：const qs = require（ 'qs'）;

4-次のようにデフォルトでaxiosを使用します：

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