Spring Authorization Server 1.0.0: /oauth2/token リクエスト時の JavaScript エラー

Question

Spring Authorization Server を作成しました。コードは github https://github.com/costerutilo/UTILO-Authorization-Server

で見つけることができます。

JavaScript 経由でトークンを読み取ることができません。クライアント認証コードを取得するために単純な Vue Web アプリケーションを作成しましたが、トークンを取得できません。

フェッチ API を使用してみます:

const url = 'http://127.0.0.1:9000/oauth2/token';

    var credentials = btoa(import.meta.env.VITE_CLIENT_ID ':' 'secret');
    var BasicAuth = 'Basic ' 認証情報;

    var myHeaders = 新しいヘッダー();
    //myHeaders.append("認可", "基本 dXRpbG8tY2xpZW50OnNlY3JldA==");
    myHeaders.append("認可", BasicAuth);
    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

    var urlencoded = 新しい URLSearchParams();
    urlencoded.append("grant_type", "authorization_code");
    // urlencoded.append("コード", "yyJTTI3JqNno1XlSW59qxX3CCytMm-ChoHnqVw3iSUGyT6ltT_tpPclQ8bdSyeApO4IWE442irBiRwntJJzae9BIntpC3_vshTgNhAfbsBlkwh3n50jkAxs3 hTqavqsy");
    urlencoded.append("コード", コード);
    urlencoded.append("redirect_uri", "https://www.utilo.eu");

    var requestOptions = {
      メソッド: 'POST'、
      ヘッダー: myHeaders、
      本文: URLコード化、
      リダイレクト: 'フォロー'
    };

    fetch(url, requestOptions)
        .then(response =>response.text())
        .then(結果 => console.log(結果))
        .catch(error => console.log('error', error));

ブラウザの JavaScript コンソールに CORS 例外が表示されます

オリジン 'http://127.0.0.1:9010' から 'http://127.0.0.1:9000/oauth2/token' で取得するアクセスが許可されました。 CORS ポリシーによってブロックされました: プリフライト要求への応答がアクセス制御チェックに合格しません

サーバー コンソールに次のエラーが表示されます:

2023-02-27T09:35:53.786 01:00 TRACE 33212 --- [nio-9000-exec-3] o.s.s.w.a.ExceptionTranslationFilter : AnonymousAuthenticationToken の送信 [プリンシパル]アクセスが拒否されたため、認証エントリ ポイントへの =anonymousUser、Credentials=[PROTECTED]、Authenticated=true、Details=WebAuthenticationDetails [RemoteIpAddress=127.0.0.1、SessionId=null]、Granted Authorities=[ROLE_ANONYMOUS]]

org.springframework.security.access.AccessDeniedException: アクセスが拒否されました

Postman で同じリクエストを試行すると、トークンを含む JSON が得られます。

自分の推論の誤りが何なのか、何が間違っているのかわかりません。

Answer 1

Spring Security フィルター チェーンの CORS を有効にし、この例 のような @Bean を提供する必要があります。 リーリー

注: ポート 4200 は Angular 開発環境用です。Vue 開発サーバーのポートに置き換えてください。