401エラー - フェッチを使用してJWTトークンが見つかりません

Question

私は反応が新しく、主にJavaScriptに対応しています。 localhostでホストされているWebアプリケーションにはreactを使用しています：node.jsの3000と私のバックエンドのsymfony 2.8は、lexikとfos userで保護されたapiを公開するapacheのlocalhost：80でホストされています。 APIを保護する前に、すべて正常に動作します。 次のようにフェッチを使用した場合、APIを確保した後、私は401エラーを取得する：

let myToken = localStorage.getItem('auth_token') //token properly retrieved 
let myHeaders = new Headers(); 
myHeaders.append("Authorization", myToken) 
return fetch(
    pathToMyResource, 
    { 
     method: "post", 
     headers: myHeaders 
    } 
).then(do stuff with the answer) 

これは私にプリフライトリクエストへの回答のヘッダーに次のエラーを与える：

Request URL:http://127.0.0.1/edsa-food_app_symfony_2.8/api/site/1/get 
Request Method:OPTIONS 
Status Code:401 Unauthorized 
Remote Address:127.0.0.1:80 
Referrer Policy:no-referrer-when-downgrade 

そして、応答：

{"code":401,"message":"JWT Token not found"} 

私も

で、私は本当にこれが動作するようになっているか理解していないという理由だけで、確認3210

credentials: 'include' 

そして

mode: 'no-cors' 

しかし、もっと成功しませんでした。

localhost：8000からphpを使って同じリクエストをビルドして送信すると、完全に動作します。私はよく理解していれば

$url = pathToMyResource 
$options = array(
    'http' => array(
     'header' => "Authorization: Bearer $token" 
     'method' => 'POST', 
    ) 
); 

$context = stream_context_create($options); 
$result = file_get_contents($url, false, $context); 
var_dump($result); 

はそれがLexik JWT Token not foundで説明したApacheのエラーすることはできません：私は、次のコードを使用するすべてのsymfony 2.8のプロジェクトのルートにデフォルトの.htaccess含まれています

RewriteEngine On 
RewriteCond %{REQUEST_URI}::$1 ^(/.+)/(.*)::\2$ 
RewriteRule ^(.*) - [E=BASE:%1] 

私がチェックmod_rewriteが有効になっています。以下は

Chromeで報告したように、ヘッダーです：

**General** 
Request URL:http://127.0.0.1/edsa-food_app_symfony_2.8/api/site/1/get 
Request Method:OPTIONS 
Status Code:401 Unauthorized 
Remote Address:127.0.0.1:80 
Referrer Policy:no-referrer-when-downgrade 

**Response Headers** 
view source 
Access-Control-Allow-Origin:* 
Cache-Control:no-cache 
Connection:Keep-Alive 
Content-Length:44 
Content-Type:application/json 
Date:Tue, 08 Aug 2017 01:05:20 GMT 
Keep-Alive:timeout=5, max=100 
Server:Apache/2.4.18 (Win32) PHP/5.6.19 
WWW-Authenticate:Bearer 
X-Powered-By:PHP/5.6.19 

**Request Headers** 
view source 
Accept:*/* 
Accept-Encoding:gzip, deflate, br 
Accept-Language:en-GB,en;q=0.8,en-US;q=0.6,fr;q=0.4,zh-CN;q=0.2,zh;q=0.2,it;q=0.2 
Access-Control-Request-Headers:authorization 
Access-Control-Request-Method:POST 
Connection:keep-alive 
Host:127.0.0.1 
Origin:http://localhost:3000 
Referer:http://localhost:3000/service-worker.js 
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 

そしてPOSTリクエスト自体の：

**General** 
Request URL:http://127.0.0.1/edsa-food_app_symfony_2.8/api/site/1/get 
Referrer Policy:no-referrer-when-downgrade 

**Request Headers** 
Provisional headers are shown 
authorization:Bearer eyJhbGciOiJSUzI1NiJ9.eyJyb2xlcyI6WyJST0xFX1VTRVIiXSwidXNlcm5hbWUiOiJhbnRvaW5lIiwiaWF0IjoxNTAyMTM4ODUwLCJleHAiOjE1MDIyMjUyNTB9.wpWZZLf5wWjrU0-eAQUR0XiDTvf1jRtiJuGIHoYm7Yo4lGhOn-_bYuJIdv71ZUiuYfaaMxOW4xzXN3JjB9KfrWmXD4jqI6CnHFYZISGlYvAGJayD_z8CMIEdvrMXrbb6_nEc0CaB68BOf7wqJyoNatFKlepwmCHevsRtTIbhc_GviQf_U_Fw30ShtogIJBLqmVD4ex-j0_9QbblAIqNhc8c0thEFYtN7FVepLehCzBNCTNL8l-mxYEFTrUYLKwSt4lRahgTsv4Ozhxl300xz7BbdQEr3ph2i4ssVcvokpEO2C07QicWSwXFx1Vx-2a6XbkoeorTz_P7WstBzinMdv0etlIz2VYN_oUmHaxDu9jlsu90nZlL2Ea7Ak7dSJaNYzmB11yga_OSiWMpzWTjaqP3MLJuS1O5keHMbliERgnBJM_rsMZ-mkVSM8j4t31L1QJCfP0RW-Vfj3biYR1uYNfXwbbdqmIpn6b39qOCY9l4F99dK6R-PKq5ZeBHEfy-OpN39NFmaMQQX5gYCQ3TzVdeou6-hjpqRnNl8dc0HYzAl3fbU102JMefZNvCsIdcI6WDCiyWZO9Viy-z9REAVF4Pr9bLFpc-Q6Lqdj32lt1-yy6i75IOavrPqRilhRh2z_V7rP_DqahrLhFSDPPVg_gcqb8n31_6q3wtyzx16aJ4 
Origin:http://localhost:3000 
Referer:http://localhost:3000/restaurant 
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 

私は失われています。

Answer 1

あなたはそれはあなたがこれはあなたのApacheの設定を追加することにより、Apacheのレベルでそれを処理することができるかもしれない200や204

でプリフライトに応答するように、あなたのバックエンドを設定する必要があります。

RewriteEngine On 
RewriteCond %{REQUEST_METHOD} OPTIONS 
RewriteRule ^(.*)$ $1 [R=200,L] 

それでも解決しない場合は、さらに掘り下げて、バックアップシステムのどの部分が認証を要求しているのかを把握する必要があります。OPTIONSリクエスト。

1. あなたのコードは、それがAuthorizationヘッダーとリクエストを送信したいブラウザを伝えます：何ここで起こっていることは、これがあるので

   理由があります。

2. お使いのブラウザでは、Authorizationヘッダーの要求でCORSプリフライトOPTIONSを実行して、サーバーがそのヘッダーを要求できることを確認する必要があります。
3. お使いのブラウザはOPTIONSチェックの全体の目的-because AuthorizationヘッダせずにサーバーにOPTIONS要求を送信し、それはそれを送信するためにOKだかどうかを確認することです。
4. サーバーではOPTIONS要求が表示されますが、要求にAuthorizationを許可する方法で応答するのではなく、そのヘッダーが存在しないため401で拒否します。
5. ブラウザはCORSプリフライトの応答を200または204にする代わりに、その401応答を取得します。したがって、ブラウザはすぐに停止し、コードからPOSTリクエストを試みることはありません。