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

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

新規登録して質問してみよう
ただいま回答率
85.48%
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ライブラリです。

Q&A

解決済

2回答

3446閲覧

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

cantama

総合スコア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ライブラリです。

0グッド

1クリップ

投稿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

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

該当のソースコード

java

1//Controller 2@PostMapping("/api/auth/login") 3 public ResponseEntity<?> login(@RequestBody AuthenticationRequest authenticationRequest)throws InvalidKeySpecException, NoSuchAlgorithmException { 4 final Authentication authentication = authenticationManager.authenticate(new UsernamePasswordAuthenticationToken( 5 authenticationRequest.getUsename(), authenticationRequest.getPassword())); 6 7 SecurityContextHolder.getContext().setAuthentication(authentication); 8 9 //トークン生成 10 User user=(User)authentication.getPrincipal(); 11 String jwtToken=jwtprovider.createToken(user); 12 13         //レスポンス生成 14 LoginResponse response=new LoginResponse(); 15 response.setToken(jwtToken); 16 17 return ResponseEntity.ok(response); 18 } 19}

javascript

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

javascript

1const LoginPage=({loading,error,...props})=>{ 2 3 const [values, setValues] = useState({ 4 userName: '', 5 password: '' 6 }); 7 8 const handleSubmit=(evt)=>{ 9 evt.preventDefault(); 10 props.authenticate(); 11 12 userLogin(values).then((response)=>{ 13 14 console.log("response",response); 15 if(response.status===200){ 16 props.setUser(response.data); 17 } 18 else{ 19 props.loginFailure('Something Wrong!Please Try Again'); 20 } 21 22 23 }).catch((err)=>{ 24 25 if(err && err.response){ 26 27 switch(err.response.status){ 28 case 401: 29 console.log("401 status"); 30 props.loginFailure("Authentication Failed.Bad Credentials"); 31 break; 32 default: 33 props.loginFailure('Something Wrong!Please Try Again'); 34 35 } 36 } 37 else{ 38 props.loginFailure('Something Wrong!Please Try Again'); 39 } 40 }); 41 } 42 43 return ( 44 <div className="login-page"> 45 ... 46 <input id="username" type="text" className="form-control" minLength={2} value={values.userName} name="userName" required /> 47 ... 48 <input id="password" type="password" className="form-control" minLength={2} value={values.password} name="password" required/> 49 ... 50 <button type="submit">submit</button> 51 ... 52 </div> 53 ) 54}

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

STS4

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

package.json

json

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/12/24 09:54

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

回答2

0

ベストアンサー

CORSエラーが原因かなと思います。
Postmanのような開発ツールだと、CORSを突破できてしまうんですが、ブラウザではCORSの有効化が必要になります。

このため、以下の@CrossOriginをお試しください。

java

1//Controller 2@CrossOrigin("http://localhost:3000") //Reactjsを動かしているポート 3@PostMapping("/api/auth/login") 4public ResponseEntity ...

※@CrossOriginは、クラス(レベル)でも使用することができます。

投稿2021/12/24 13:18

KT001

総合スコア613

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cantama

2021/12/24 14:06

回答ありがとうございます。 変わらずエラーが起きますが、サーバー側のエラーが org.springframework.security.authentication.InternalAuthenticationServiceException: No value present Caused by: java.util.NoSuchElementException: No value present でした。 やはりCORSによって届いていないようでした。。。
KT001

2021/12/24 15:23 編集

クライアント(React)側から、データは正しく送れているでしょうか?認証側がどうなっているか読み取れないのですが、csrf().disable()をしているかは気になりました。 JWT認証の場合、いくつかハマるポイントがあるので、一度何かのチュートリアルを試してみると(理解が深まって)宜しいかもしれません。
guest

0

package.json

{ ... "dependencies": { ... }, "scripts": { ... }, "proxy": "http://localhost:8080", }

投稿2021/12/24 11:37

wyq2020

総合スコア54

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問