React + Laravel 5.8.33 + Axios：axios.postリクエストでユーザーを登録する際のエラー。コードの問題を明確にする

Question

更新

Firefoxの開発ツールのネットワークタブを確認すると、次のようになります。

Response headers (290 B)    
Raw headers
Access-Control-Allow-Origin 
*
Allow   
POST
Cache-Control   
no-cache, private
Connection  
close
Content-Type    
text/html; charset=UTF-8
Date    
Sat, 31 Aug 2019 09:45:04 GMT
Date    
Sat, 31 Aug 2019 09:45:04 GMT
Host    
localhost:8000
X-Powered-By    
PHP/7.2.19-0ubuntu0.18.04.2
Request headers (438 B) 
Raw headers
* Accept: */* *
Accept-Encoding 
gzip, deflate
Accept-Language 
en-US,en;q=0.5
Access-Control-Request-Headers  
x-csrf-token,x-requested-with,x-xsrf-token
Access-Control-Request-Method   
POST
Connection  
keep-alive
Host    
localhost:8000
Origin  
http://127.0.0.1:8000
Referer 
http://127.0.0.1:8000/register
User-Agent  
Mozilla/5.0 (X11; Ubuntu; Linu…) Gecko/20100101 Firefox/68.0

メソッドGETなのはなぜですか？ツールから変更しようとすると、POSTメソッドは許可されません。また、リクエストを送信すると、次の情報が表示されます。

更新

私のaxiosが必要なbootstrap.jsファイルに変更を加え始めましたが、成功しませんでした。変えてみた

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

に

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
};

しかし、本当に、私はポイントに到達することができません。コメントにリンクされたチュートリアルがどのように機能したか理解できず、何を見るかについてのアイデアが不足し始めています。だから、どんな助けもありがたいです。誰かが有効な参照を指し示すことができる場合、これは未解決の問題です。別のコードでpyプロジェクトを実装します。しかし、そうでない場合、私はこの問題が未解決のままであってはなりません。それが私の部分のマイナーな間違いであるなら、それは正確にはどこですか？ありがとうございます。

注：元の投稿では、私のWebルートがどのように見えるかを示していませんでした。私はReact Laravelの内部から使用しているので（ターミナルphp artisanプリセット反応で使用しました;））私のWebルートは、事前構成済みのlaravelコードからのものです

Route::get('/', function () {
    return view('welcome');
});

Reactアプリを呼び出す新しいコードに：

Route::view('/{path?}', 'app');

pdate：（昨日から）Apache2の設定を変更しようとしましたが、問題は解決しません。これを変更と見なすかどうかはわかりません。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/user/register. (Reason: missing token ‘x-requested-with’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/user/register. (Reason: CORS request did not succeed).

Source map error: request failed with status 404
Resource URL: http://127.0.0.1:8002/js/app.js
Source Map URL: popper.js.map

pdate2：axios postリクエストを変更してみました：

const dataofuser={
    name:data.name,
    email:data.email,
    password:data.password
}


 const instance = axios.create({
     method:'post',
     baseURL: 'http://localhost:8000/api/user/',
     timeout: 1000,
     headers: {'Access-Control-Allow-Origin': '*' , 'Access-Control-Allow-Methods ':  'POST, GET, OPTIONS, PUT, DELETE','Access-Control-Allow-Headers':  'Content-Type, X-Auth-Token, Origin, Authorization','X-Requested-With': 'XMLHttpRequest' }
 });

instance          .post("register/create",dataofuser)
           .then(response => {
            console.log(response);
            return response;
          })
           .then(json => {
            if (json.data.success) {
              alert(`Registration Successful!`);
              history.Push('/')

...しかし、それから私は

無効なヘッダー名

---

オリジナル別の投稿で以前に述べたように、私は現在自己学習していますReactおよびLaravel。ReactフロントエンドおよびLaravelバックエンドとして。この投稿は、登録フォームに記入して送信しようとすると発生するエラーに関するものです。ユーザーは取得しません。登録すると、何をしようとしているかに応じていくつかのエラーが発生します。

私が試した場合：

axios
          .post("http://localhost:8000/api/user/register", {
              name: data.name,
              email: data.email,
              password: data.password
          })

私はコンソールに入ります：

> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/user/register. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/user/register. (Reason: CORS request did not succeed).

>Source map error: request failed with status 404
Resource URL: http://127.0.0.1:8000/js/app.js
Source Map URL: popper.js.map

>[object Object] Error: Network Error 

私がしようとすると

axios
  .post("/user/register", {
      name: data.name,
      email: data.email,
      password: data.password
  })

次に私は得る（私はこれが悪いルート定義に関するエラーだと信じています）：

Source map error: request failed with status 404
Resource URL: http://127.0.0.1:8000/js/app.js
Source Map URL: popper.js.map

私が使うなら

axios
  .post("/api/user/register", {
      name: data.name,
      email: data.email,
      password: data.password
  })

私は得る：

Source map error: request failed with status 404
Resource URL: http://127.0.0.1:8000/js/app.js
Source Map URL: popper.js.map

[object Object] Error: Request failed with status code 500

CORSの問題（そのような問題を回避するための措置を講じたものの）が他にあるか、ルーティングやデータの受け渡し、または単に構文上の問題があるかどうか（はっきりしません）はもうわかりません。私はCORSの問題に取り組みます（そのpopper.js.map通知の内容が何であるかはわかりませんが）。以下のコードを投稿しています。

---

pdate1：

私はChromeブラウザでコードを実行しました

 axios
          .post("http://localhost:8000/api/user/register", {
              name: data.name,
              email: data.email,
              password: data.password
          })

そして私は

Access to XMLHttpRequest at 'http://localhost:8000/api/user/register' from Origin 'http://127.0.0.1:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
app.js:70270 [object Object] Error: Network Error
app.js:371 POST http://localhost:8000/api/user/register net::ERR_FAILED

CORSの問題があるようです...昨日から今日まで、その対処方法を理解できません。

---

いくつかのコード：

私のApp（親）コンポーネントには、Register（子）コンポーネントに渡される関数が含まれています。この関数は登録プロセスを処理します

        import React, {Component} from 'react'
        import ReactDOM from 'react-dom'
        import {BrowserRouter, Route, Switch } from 'react-router-dom'
        // import {Link} from 'react-router-dom'
        import Header from './Header'
        import Intro from './Intro'
        import Register from './Register'
        import Login from './Login'
        import Userpage from './Userpage'
        import Footer from './Footer'
        import Science from './Science'
        import Literature from './Literature'
        // import {AppState} from 'react-native'


        class App extends Component {

            constructor(props){
                super(props);
                this.state={
                    isLoggedIn:false,
                    user:{},
                    data_user:'',
                    data_username:''
                }

                this.username_Callback=this.username_Callback.bind(this)
                this._registerUser=this._registerUser.bind(this)



            }

            componentDidMount() {
                let state = localStorage["appState"];
                if (state) {
                  let AppState = JSON.parse(state);
                  console.log(AppState);
                  this.setState({ isLoggedIn: AppState.isLoggedIn, user: AppState });
                }
          }

            _registerUser(data){

                $("#email-login-btn")
                  .attr("disabled", "disabled")
                  .html(
                    '<i class="fa fa-spinner fa-spin fa-1x fa-fw"></i><span class="sr-only">Loading...</span>'
                  );



                // var formData = new FormData(); 
                // formData.append('data.name');
                // formData.append('data.email');
                // formData.append('data.password');

                console.log(data)
                console.log(data.name)
                console.log(data.email)
                console.log(data.password)
                // console.log(formData)



                axios
                  .post("http://localhost:8000/api/user/register", {
                      name: data.name,
                      email: data.email,
                      password: data.password
                  })
                  .then(response => {
                    console.log(response);
                    return response;
                  })
                  .then(json => {
                    if (json.data.success) {
                      alert(`Registration Successful!`);
                      history.Push('/')


                      let userData = {
                        name: json.data.data.name,
                        id: json.data.data.id,
                        email: json.data.data.email,
                        auth_token: json.data.data.auth_token,
                        timestamp: new Date().toString()
                      };
                      let appState = {
                        isLoggedIn: true,
                        user: userData
                      };
                      // save app state with user date in local storage
                      localStorage["appState"] = JSON.stringify(appState);
                      this.setState({
                        isLoggedIn: appState.isLoggedIn,
                        user: appState.user
                      });
                    } else {
                      alert(`Registration Failed!`);
                      $("#email-login-btn")
                        .removeAttr("disabled")
                        .html("Register");
                    }
                  })
                  .catch(error => {
                    alert("An Error Occured!" + error);
                    console.log(`${data} ${error}`);
                    $("#email-login-btn")
                      .removeAttr("disabled")
                      .html("Register");
                  });

          };



render(){
                return(


                    <BrowserRouter>

                        <Header listNameFromParent={this.state.data_username} />

                        <Footer />

                        <Switch>
                            <Route exact path='/' component={Intro} />
                            <Route path='/register' render={props=><Register {...props} registerUser={this._registerUser}/>}/>

                            <Route path='/login' render={props=><Login {...props} loginUser={this._loginUser}/>}/>
                            <Route path='/userpage' component={Userpage}/>
                            <Route path='/science' component={Science}/>
                            <Route path='/literature' component={Literature}/>

                        </Switch>


                    </BrowserRouter>




                    )
            }
        }

        ReactDOM.render(<App />, document.getElementById('app'))

私の登録コンポーネントはフォームを含み、入力データを返します。 console.logコマンドを使用して、データがアプリとレジスター関数内で実際に使用可能であることを確認しています。質問があれば、コードを投稿できます。

私のバックエンドで私は持っています：

api.php

<?php

        use Illuminate\Http\Request;

        // header('Access-Control-Allow-Origin: *');
        // //Access-Control-Allow-Origin: *
        // header('Access-Control-Allow-Methods:  POST, GET, OPTIONS, PUT, DELETE');
        // header('Access-Control-Allow-Headers:  Content-Type, X-Auth-Token, Origin, Authorization');
        /*
        |--------------------------------------------------------------------------
        | API Routes
        |--------------------------------------------------------------------------
        |
        | Here is where you can register API routes for your application. These
        | routes are loaded by the RouteServiceProvider within a group which
        | is assigned the "api" middleware group. Enjoy building your API!
        |
        */

        Route::middleware('auth:api')->get('/user', function (Request $request) {
            return $request->user();
        });


        Route::group(['middleware' => ['jwt.auth','api-header']], function () {

            // all routes to protected resources are registered here  
            Route::get('users/list', function(){
                $users = App\User::all();

                $response = ['success'=>true, 'data'=>$users];
                return response()->json($response, 201);
            });
        });
        Route::group(['middleware' => 'api-header'], function () {

            // The registration and login requests doesn't come with tokens 
            // as users at that point have not been authenticated yet
            // Therefore the jwtMiddleware will be exclusive of them
            Route::post('/user/login', 'UserController@login');
            Route::post('/user/register', 'UserController@register');
        });

API.php（ミドルウェア）

<?php

        namespace App\Http\Middleware;

        use Closure;

        class API
        {
            /**
             * Handle an incoming request.
             *
             * @param  \Illuminate\Http\Request  $request
             * @param  \Closure  $next
             * @return mixed
             */
            public function handle($request, Closure $next)
            {
                $response = $next($request);
                $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Content-Range, Content-Disposition, Content-Description, X-Auth-Token');
                $response->header('Access-Control-Allow-Origin','*');
                $response->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
                $response->header('Access-Control-Allow-Headers',' Origin, Content-Type, Accept, Authorization, X-Request-With');
                $response->header('Access-Control-Allow-Credentials',' true');
                //add more headers here
                return $response;
            }
        }

UserController

<?php

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;
    use App\User;
    use JWTAuth;
    use JWTAuthException;


    class UserController extends Controller
    {
        private function getToken($email, $password)
        {
            $token = null;
            //$credentials = $request->only('email', 'password');
            try {
                if (!$token = JWTAuth::attempt( ['email'=>$email, 'password'=>$password])) {
                    return response()->json([
                        'response' => 'error',
                        'message' => 'Password or email is invalid',
                        'token'=>$token
                    ]);
                }
            } catch (JWTAuthException $e) {
                return response()->json([
                    'response' => 'error',
                    'message' => 'Token creation failed',
                ]);
            }
            return $token;
        }
public function register(Request $request)
        { 


            $validator = Validator::make($request->all(), [
                'name' => 'required|max:255',
                'email' => 'required',
                'password' => 'required'
            ]);
            if ($validator->fails()) {
                return response()->json(['errors'=>$validator->errors()],422);
            }





            $payload = [
                'password'=>\Hash::make($request->password),
                'email'=>$request->email,
                'name'=>$request->name,
                'auth_token'=> ''
            ];




            $user = new \App\User($payload);
            if ($user->save())
            {

                $token = self::getToken($request->email, $request->password); // generate user token

                if (!is_string($token))  return response()->json(['success'=>false,'data'=>'Token generation failed'], 201);

                $user = \App\User::where('email', $request->email)->get()->first();

                $user->auth_token = $token; // update user token

                $user->save();

                $response = ['success'=>true, 'data'=>['name'=>$user->name,'id'=>$user->id,'email'=>$request->email,'auth_token'=>$token]];        
            }
            else
                $response = ['success'=>false, 'data'=>'Couldnt register user'];


            return response()->json($response, 201);
        }
    }

繰り返しになりますが、私は問題が何であるかを明確にすることができず、登録手続きが機能しません。

Answer 1

csrfトークンを投稿パラメーターとして使用してみましたか？できない場合は、csrf tokenおよびtokenは、axiosリクエストの投稿パラメータにあります。それはあなたの問題を解決します。

Answer 2

Laravel-React-Axiosのシンプルなまだ登録アプリで何が起こっているのかを理解した方法をここに投稿します。問題に取り組むことを試みた上記の投稿から、ClueMediatorによるコメントの一部のみが、舞台裏の問題を理解する方法に役立ち、私の投稿に対するQuentinによる有益で有用なコメントがいくつかありました。ここで、私が見た限りでは、axiosとlaravelと.jsフロントエンドが他のすべての投稿とgithubディスカッションに焦点を当てていなかったことに注意してください（または彼らがそうした場合、彼らはそれに真剣な注意を払うことなくそれをしました）。

まず、私の最初の投稿で、投稿リクエストをlocalhost：8000からapi/routeの名前だけに変更すると、一部のcorsが削除されたように見えたことがわかります。一度に1つまたは2つのサーバーでプロジェクトを実行していたので、職人がアプリを提供していた場所の関数としてcorsが戻ってくる可能性があります。

第二に、corsが削減された場合でも、内部500エラーが発生しました。これは、私が学んでいたチュートリアルの間違いによるもので、マイグレーションの不完全な構築に関係していました。

ポイントへ。 axiosは常に、コード内にあるリクエスト（この例ではpostリクエスト）とともにオプションリクエストを送信しようとしているようです。問題をチェックするために私が行ったのは、職人がサービスを提供しているときにホストとポートを変更し、ルートを正しく一致させるようにコードを変更することでした。次に、コンソールでネットワークタブを確認しましたが、postリクエストは正常に送信されましたが、axios.optionsリクエストがデフォルトでlocalhost：8000に送信されるため、corsがまだあることがわかりましたbutそこから私のアプリを提供していません。そこから仕える職人を指定し、マイグレーションの構成を修正することで、問題は解決しました。

ここで何かに下線を引くことが重要です：artisanは最初にlocalhost：8000でサービスを提供しますが、彼を最初に開いたとき、2番目のサーバーを開くと、通常どおり次の使用可能なポートに移動します。移行コードの間違いがなければ、おそらく職人に起因する問題と、それがどこで機能していたのかを理解できたでしょう。しかし、データベースとの関係が誤動作しているため、それでも内部サーバーエラーとして500エラーが発生し、別のサーバーを開いたところ、axiosが常にlocalhost：8000にのみオプション要求を送信していることがわかりました。フロントエンドとバックエンドが互いに合意した場合、コードに多くの変更を加えると不整合が生じます。したがって、結論として、悪いコード（私が見たよりも早く見るべきだったもの）を処理した後は、軸と職人を正しく一致させることだけが問題でした。

上記のロジックがどのように改善されるかについての観察は素晴らしいでしょう。

ありがとうございます。

Answer 3

インストールしました https://github.com/barryvdh/laravel-cors

cORSの問題の場合

場合によってはaxiosヘッダーのデフォルトを使用しない方が良い場合があります。私にはうまくいきません。ヘッダーを手動でロードしてください

const options = {method： 'POST'、headers：{'X-CSRF-TOKEN'： 'xxx'}、data：data、url、}; axios（オプション）;