要求ステータスが正しくありません400.必須の文字列パラメータ 'login'が存在しません

Question

react.jsでログインを構築し、それを私のspringbootに接続しようとしています。反応し、

@RestController 
public class TestController { 

@RequestMapping(value = "/test/login", method = RequestMethod.GET) 
public Boolean testLogin(@RequestParam String login, @RequestParam String password) { 
    if (login.equals ("ajt")) 

    return true; 
    else { 
     return false; 
    } 
} 

それらのそれぞれは、2つの異なるポートに存在している：ここでは

は私のコード、react.jsです：

import React from 'react'; 


export default class Login extends React.Component { 
constructor() { 
    super(); 
    this.state = { 
     login:"", 
     password:"" 
    } 
} 

// This will be called when the user clicks on the login button 
login(e) { 
    e.preventDefault(); 
    console.log(this.state.password) 

    function createCORSRequest(method, url) { 
     var xhr = new XMLHttpRequest(); 
     if ("withCredentials" in xhr) { 

      // Check if the XMLHttpRequest object has a "withCredentials" property. 
      // "withCredentials" only exists on XMLHTTPRequest2 objects. 
      xhr.open(method, url, true); 

     } else if (typeof XDomainRequest != "undefined") { 

      // Otherwise, check if XDomainRequest. 
      // XDomainRequest only exists in IE, and is IE's way of making CORS requests. 
      xhr = new XDomainRequest(); 
      xhr.open(method, url); 

     } else { 

      // Otherwise, CORS is not supported by the browser. 
      xhr = null; 

     } 
     return xhr; 
    } 

    var xhr = createCORSRequest('POST', "http://localhost:8080/test/login"); 
    if (!xhr) { 
     throw new Error('CORS not supported'); 
    } 
     fetch().then(r => r.json()) 
      .then(data => console.log(data)) 
      .catch(e => console.log(e)) 
} 

render() { 

    return (
     <form role="form"> 
      <div> 
       <input type="text" name="login" placeholder="Username" /> 
       <input type="password" name="password" placeholder="Password" /> 
      </div> 
      <button type="submit"onClick={this.login.bind(this)}>Login</button> 
     </form> 
    ); 
} 
} 

そして、これはTestControllerように配置され、私のspringbootコードですon：9000、springboot on：8080。私がページを反応させるに

はまた、私はエラーを取得する：

TypeError: Failed to execute 'fetch' on 'Window': 1 argument required, but only 0 present.(…) 

任意のアイデア？

info：私は6ヶ月間私の後ろにコーディングしています-_-親切にしてください！

Answer 1

ここでは小さなミスの一握りがあります。私はそれらのいくつかについて正しい方向にあなたを指摘しようとします。

まず、fetchを使用しません。それはlisted as an expiremntal technology by MDNであり、ブラウザのサポートは弱いです。 Web開発を始めたばかりの人にとっては、より確立された「安全な」技術を使うほうがはるかに優れています。いずれか単純XMLHTTP ajax or using the ajax method from jquery。あなたは既にXMLHTTPの道を進んでいるようですので、上記のリンク先の例でfetchコマンドを置き換えることをお勧めします。

次に、2つの異なるHTTPメソッドを使用しています。あなたのAjaxオブジェクトは、POSTコマンドを送信するために起こっているが、あなたのサーバーはGETコマンドを待機しています。これは次の行に設定されています。

var xhr = createCORSRequest('POST', "http://localhost:8080/test/login"); 

---

@RequestMapping(value = "/test/login", method = RequestMethod.GET) 

あなたは、コードのこれら2枚がお互いに話をしたい場合は、それらは同じ方法に設定する必要があります。このケースでは、両方のためのPOSTをしたいが、それは将来のためにthe distinction between the twoを学ぶ価値があります。

最後に、入力からajax XMLHTTPオブジェクトに情報を取得する問題があります。これを行うには、入力にonChangeフックを設定し、反応するコンポーネント内handleChange機能にそれらを添付したいとしています。コンポーネントのstateに値を保存し、後でXMLHTTPに適用する状態から値を取るために、この機能を使用してください。

私が説明しています何の簡単な例。

render() { 

    return (
      <div> 
       <input type="text" name="login" onChange={this.handleChange}/> 
       <button onClick={this.login.bind(this)}>Login</button> 
      </div> 
    ); 
} 

handleChange(value) { 
    this.setState({login: value}); 
} 

login() { 

    var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance 
    xmlhttp.open("POST", "/test/login"); 
    xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
    xmlhttp.send(JSON.stringify({login: this.state.login})); 
}