web-dev-qa-db-ja.com

Axios POSTリクエストが機能しない

同じ問題について多くの質問があることは承知していますが、まだ解決策がどれもうまくいきません。

Lumenで構築されたAPIを使用するReactJSアプリケーションがあります。 APIはReact NativeおよびJQuery AJAXによっても消費され、正常に動作します両方に。

ReactJSからaxiosで[〜＃〜] post [〜＃〜]リクエストを送信しようとすると、405 Method Not Allowedエラーが発生する[〜＃〜]オプション[〜＃〜]リクエスト。

Response HeadersRequest Headers

Axiosリクエストは次のとおりです。

const body = { username, password };

axios.post(`{$uri}/payment/api/login`, {body})
     .then(res => console.log(res))
     .catch(err => console.log('Login: ', err));

最初、これはCORSの問題だと思いました。AWSS3でホストされている静的サイトによってAPIが問題なく使用されているため、これは奇妙なことでした。したがって、私のCORSミドルウェアは正常に動作します。

FetchAPIを使用してAPIを呼び出してみたところ、問題なく動作しました。 [〜＃〜] post [〜＃〜]リクエストをダミーAPIhttps://jsonplaceholder.typicode.com/usersaxiosから、それはうまくいきました。

編集

わかりましたので、fetchAPIがapplication/x-www-form-urlencoded形式でデータを送信することを知りました。これは、なんらかの理由でプリフライトリクエストの対象ではありません。これは、CORSミドルウェアに問題があることを意味します。

CORSMiddleware

<?php

namespace App\Http\Middleware;

use Closure;

class CORSMiddleware
{
  /**
   * 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-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS');
      $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
      $response->header('Access-Control-Allow-Origin', '*');
   }
}

まったく同じミドルウェアは、Lumenの別のAPIビルドでも使用され、Vueフロントエンドで使用され、axiosを使用します） 。

追加情報

Console Error

[〜＃〜] get [〜＃〜]リクエストは私のAPIで正常に機能します。

reactjsapihttp-postaxioslumen
4
Haseeb Burki

私にとって、問題はサーバー側（Node.js）でした。

CORS設定を適用する前にミドルウェア機能（トークンが存在するかどうかをチェックする）を適用していたため、OPTIONS呼び出しのみが行われていました。

例えば.

  1. app.use（verifyToken）;
  2. require（ "./ startup/cors"）（app）

私は彼らの順序を逆にしました、そしてそれは私にとってうまくいきました。

0
Prateek Jha