title: Why in React, my axios API call has Authorization Header which contains Bearer <token> but not being authorized and gives 401 error
body: <p>I'm making axios call to my php API (which shows user data when a valid token is sent back to API server) and sending a valid jwt token in request header (along with Bearer as prefix) and in the Network's tab its showing that my token is being sent in the header but still it gives me 401 error and returns the Error msg of API that "jwt is empty"...</p>
  
  <p>my API to fetch user data (when valid token is provided) is on <a href="http://localhost/Auth/api/validate.php" rel="nofollow noreferrer">http://localhost/Auth/api/validate.php</a></p>
  
  <p>and client side is on <a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a> </p>
  
  <p>This API is in php and works perfectly fine on Postman. But gives me 401(unauthorized) when I call it in react. I searched this error and everyone says that u should have token in the Request header, I do have it but its not being read by the server and server considers it null so sends me unauthorized error. Please Please help me someone!!!!!</p>
  
  <p>here is the axios API call:</p>
  
  <pre><code>e.preventDefault();
  const token = localStorage.getItem("jwttoken");
  
   axios.post('http://localhost/Auth/api/validate.php',token, {
  headers: {
  'Authorization' : 'Bearer '+token,
    'Accept': 'application/json, text/plain, */*',
     'Content-Type': 'application/json'
        }} )
  
  .then(response =&gt;
  {
  console.log(response.data);
  console.log(response);
  return response;
  })
    .catch(error =&gt; {
    if (error) {
      console.log("Sorry.....Error");  }
      });
  </code></pre>
  
  <blockquote>
    <p><strong>Response Headers</strong></p>
  
  <pre><code>&gt;  Request URL: http://localhost/Auth/api/validate.php 
  &gt;  Request Method: POST 
  &gt;  Remote Address: [::1]:80 
  &gt;  Status Code: 401 Unauthorized
  &gt;  Referrer Policy: no-referrer-when-downgrade
  &gt; Accept: application/json; charset=UTF-8, */* 
  &gt; Access-Control-Allow-Credentials: true 
  &gt; Access-Control-Allow-Headers: Content-Type, Accept,  X-Auth-Token, Origin,  Authorization, Client-Security-Token, Accept-Encoding, X-Requested-With
  &gt; Access-Control-Allow-Methods: GET, PUT, POST, DELETE, HEAD, OPTIONS
  &gt; Access-Control-Allow-Origin: * 
  &gt; Access-Control-Exposed-Header: true
  &gt; Authorization Access-Control-Max-Age: 33600
  &gt;  Connection: Keep-Alive
  &gt; Content-Length: 34 
  &gt; Content-Type: application/json; charset=UTF-8, */*
  &gt; Date: Sat, 23 Mar 2019 12:33:00 GMT Keep-Alive: timeout=5, max=99
  &gt; Server: Apache/2.4.29 (Win32) OpenSSL/1.1.0g PHP/7.2.3 X-Powered-By:
  &gt; PHP/7.2.3
  </code></pre>
  </blockquote>
  
  <p><strong>Request Headers:</strong></p>
  
  <blockquote>
  <pre><code>&gt; Provisional headers are shown Accept: application/json, text/plain, */*
  &gt;Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7IlZlbmRvcklEIjoiNDQiLCJDb21wYW55TmFtZSI6IlRhZGEiLCJDb250YWN0UGVyc29uIjoiVGFkYSIsIkNvbnRhY3RObyI6Ijg3ODciLCJlbWFpbCI6InRhZGFAZ21haWwuY29tIn19.YmaD_VjMKYifWXd4DsRXRodVDpBy8zASLnIfgquCwLI
  
  &gt; Content-Type: application/json 
  &gt; Origin: http://localhost:3000 
  &gt; Referer: http://localhost:3000/profile 
  &gt; User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
  
  
  &gt; Request Payload: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7IlZlbmRvcklEIjoiNDQiLCJDb21wYW55TmFtZSI6IlRhZGEiLCJDb250YWN0UGVyc29uIjoiVGFkYSIsIkNvbnRhY3RObyI6Ijg3ODciLCJlbWFpbCI6InRhZGFAZ21haWwuY29tIn19.YmaD_VjMKYifWXd4DsRXRodVDpBy8zASLnIfgquCwLI
  </code></pre>
  </blockquote>
  
  <p><strong>Here is my API validate.php</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;?php
  // required headers//
  header("Access-Control-Allow-Origin: *");
  header("Access-Control-Allow-Credentials: true");
  header("Content-Type: application/json; charset=UTF-8, */*");
  header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
  header("Access-Control-Max-Age: 33600");
  header("Content-Length: 144");
  header("Accept: application/json; charset=UTF-8, */*");
  header("Access-Control-Exposed-Header: Authorization");
  header("Access-Control-Allow-Headers: Content-Type, Accept,  X-Auth-Token, Origin,  Authorization,  Client-Security-Token, Accept-Encoding, X-Requested-With");
  
  
  // required to decode bbbb
  include_once 'config/core.php';
  include_once 'libs/php-jwt-master/php-jwt-master/src/BeforeValidException.php';
  include_once 'libs/php-jwt-master/php-jwt-master/src/ExpiredException.php';
  include_once 'libs/php-jwt-master/php-jwt-master/src/SignatureInvalidException.php';
  include_once 'libs/php-jwt-master/php-jwt-master/src/JWT.php';
  use \Firebase\JWT\JWT;
  
  // get posted data
  $data = json_decode(file_get_contents("php://input"));
  
  // get jwt
  $jwt=isset($data-&gt;jwt) ? $data-&gt;jwt : "";
  
  // if jwt is not empty
  if($jwt){
  
      // if decode succeed, show user details
      try {
          // decode jwt
          $decoded = JWT::decode($jwt, $key, array('HS256'));
  
          // set response code
          http_response_code(200);
  
          // show user details
          echo json_encode(array(
              "message" =&gt; "Access granted.",
              "data" =&gt; $decoded-&gt;data
          ));
  
      }
  
          // if decode fails, it means jwt is invalid
      catch (Exception $e){
  
          // set response code
          http_response_code(401);
  
          // tell the user access denied  &amp; show error message
          echo json_encode(array(
              "message" =&gt; "Access denied. Decode fails",
              "error" =&gt; $e-&gt;getMessage()
          ));
      }
  }
  
  // show error message if jwt is empty
  //gggg
  else{
  
      // set response code
      http_response_code(401);
  
      // tell the user access denied
      echo json_encode(array("message" =&gt; "Access denied. Empty"));
  }
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>EDIT</strong>
  I also tried sending the token without 'Bearer' prefix but it didnt work. On <strong>Postman</strong> I send a post request (in the body) to my server API like this(which works fine):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
  "jwt": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7IlZlbmRvcklEIjoiNTkiLCJDb21wYW55TmFtZSI6IkVub3VnaCIsIkNvbnRhY3RQZXJzb24iOiJlbm91Z2giLCJDb250YWN0Tm8iOiIzNDM0NCIsImVtYWlsIjoiZUBnbWFpbC5jb20ifX0.o4V6zu8AFBAMoJgRe_jvMoByDK3yDEiF_pxW4ttqpYQ"
  }</code></pre>
  </div>
  </div>
  </p>