質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Spring Security

Spring Securityは、Springのサブプロジェクトの一つでWebアプリケーションに必要な機能を追加します。正規ユーザーであるかを確認するための「認証機能」と、ユーザーのアクセスを制御する「認可機能」を簡単に追加することが可能です。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

フロントエンドからのPOSTエラー

cantama
cantama

総合スコア18

Spring Security

Spring Securityは、Springのサブプロジェクトの一つでWebアプリケーションに必要な機能を追加します。正規ユーザーであるかを確認するための「認証機能」と、ユーザーのアクセスを制御する「認可機能」を簡単に追加することが可能です。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

2回答

0評価

1クリップ

507閲覧

投稿2021/12/24 09:29

編集2021/12/24 10:56

前提・実現したいこと

フロントエンド(Reactjs)からバックエンド(Spring boot)のサーバーにPOSTしJWTを受け取るシステムです。

postmanでは、
method: POST
URL: http:locaclhost:8080/api/auth/login
body:{
"userName":"user",
"password":"pass",
}
を投げればステータス200がちゃんと返ってきます。

フロントエンド側はステータスコード403が返ってきます。

発生している問題・エラーメッセージ

バックエンド側のエラー文

2021-12-24 17:59:48.639 ERROR 20772 --- [nio-8080-exec-6] o.a.c.c.C.[.[.[/].[dispatcherServlet]  : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception java.lang.NullPointerException: Cannot invoke "String.equals(Object)" because the return value of "javax.servlet.http.HttpServletRequest.getHeader(String)" is null

フロントエンド側のエラー文

Access to XMLHttpRequest at 'http://localhost:8080/api/auth/login' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. POST http://localhost:8080/api/auth/login net::ERR_FAILED 401

authRequest

{"userName": 'user', "password": 'pass'}

該当のソースコード

java

//Controller @PostMapping("/api/auth/login") public ResponseEntity<?> login(@RequestBody AuthenticationRequest authenticationRequest)throws InvalidKeySpecException, NoSuchAlgorithmException { final Authentication authentication = authenticationManager.authenticate(new UsernamePasswordAuthenticationToken( authenticationRequest.getUsename(), authenticationRequest.getPassword())); SecurityContextHolder.getContext().setAuthentication(authentication); //トークン生成 User user=(User)authentication.getPrincipal(); String jwtToken=jwtprovider.createToken(user);          //レスポンス生成 LoginResponse response=new LoginResponse(); response.setToken(jwtToken); return ResponseEntity.ok(response); } }

javascript

export const userLogin=(authRequest)=>{ return axios({ method:'POST', url:`${process.env.hostUrl||'http://localhost:8080'}/api/auth/login`, data:authRequest }) }

javascript

const LoginPage=({loading,error,...props})=>{ const [values, setValues] = useState({ userName: '', password: '' }); const handleSubmit=(evt)=>{ evt.preventDefault(); props.authenticate(); userLogin(values).then((response)=>{ console.log("response",response); if(response.status===200){ props.setUser(response.data); } else{ props.loginFailure('Something Wrong!Please Try Again'); } }).catch((err)=>{ if(err && err.response){ switch(err.response.status){ case 401: console.log("401 status"); props.loginFailure("Authentication Failed.Bad Credentials"); break; default: props.loginFailure('Something Wrong!Please Try Again'); } } else{ props.loginFailure('Something Wrong!Please Try Again'); } }); } return ( <div className="login-page"> ... <input id="username" type="text" className="form-control" minLength={2} value={values.userName} name="userName" required /> ... <input id="password" type="password" className="form-control" minLength={2} value={values.password} name="password" required/> ... <button type="submit">submit</button> ... </div> ) }

補足情報(FW/ツールのバージョンなど)

STS4

npx create-react-appよりプロジェクト作成

package.json

json

"axios": "^0.24.0", "react": "^17.0.2",

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2021/12/24 09:54

>バックエンド(Spring boot) タグに追加されたほうが良いとおもいます。実装も。 あと、authRequest には何がどう入っていますか?

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Spring Security

Spring Securityは、Springのサブプロジェクトの一つでWebアプリケーションに必要な機能を追加します。正規ユーザーであるかを確認するための「認証機能」と、ユーザーのアクセスを制御する「認可機能」を簡単に追加することが可能です。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。