ログインシステムを作りたい。このチュートリアルで作成したセキュリティ用のJWTトークンを備えたSpring Boot APIがあります。私のフロントエンドでは、リクエストにReact JSとAxiosを使用しています。
これは私のaxios設定です：
import axios from 'axios';
const api = axios.create({
baseURL:'http://localhost:8080',
headers: {'Access-Control-Allow-Origin': '*'}
});
export default api;
そして、これはログイン関数です：
loginClickHandler = () => {
const data = {
"username":this.state.username,
"password":this.state.password
};
api.post("/login",data)
.then(response => {
console.log(response);
if(response.data !== null) {
this.setState({
loggedIn:true,
userData:response.data
});
}else{
this.showMessage(2,response.data.error)
}
})
.catch(error => {
this.showMessage(2,error);
});
};
ログイン機能自体と他のすべては正常に動作しますが、ブラウザに認証トークンがヘッダーとして表示されません。これはconsole.log(response)（ヘッダーのみ）です。
headers:
cache-control: "no-cache, no-store, max-age=0, must-revalidate"
content-length: "0"
expires: "0"
pragma: "no-cache"
しかし、リクエストにPostmanを使用すると、14のヘッダーが返され、そのうちの1つは、期待どおりにトークンが含まれているAuthorizationヘッダーです。
私の質問は、ヘッダーをブラウザに表示して、後のリクエストのために保存できるようにする方法です。
ありがとうございました
編集：
承認ヘッダーがブラウザーの[ネットワーク]タブに表示されますが、応答には表示されません。
解決：
私のJWTAuthenticationFilter successfulAuthenticationメソッドにこの行を追加する必要がありました：
res.addHeader("Access-Control-Expose-Headers",HEADER_STRING);
@Jack Chenと@Sarthak Aggarwalが示唆したように
The Access-Control-Expose-Headersブラウザーがアクセスを許可されたサーバーのホワイトリストヘッダーを許可するため、サーバーにヘッダーセットを設定する必要がある場合があります。`
構文：
Access-Control-Expose-Headers: <header-name>[, <header-name>]*
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加