title: CORS request error (react native / laravel passport)
body: <p>I created a mobile app which consumes a back-end API.I am using fetch api on JS end to make my requests. However, I am getting a CORS error</p>
  
  <pre><code>Error message: Access to fetch at 'mydomain.com' from origin 'null' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
  </code></pre>
  
  <p>I have tried the following:</p>
  
  <p>A/ In my .htaccess</p>
  
  <pre><code> RewriteEngine On
   RewriteCond %{HTTPS} off
   RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]]
   &lt;FilesMatch ".(ttf|otf|eot|woff)$"&gt;
   &lt;IfModule mod_headers.c&gt;
   Header set Access-Control-Allow-Origin "*"
   Header set Access-Control-Allow-Methods "GET,POST,OPTIONS,DELETE,PUT"
   Header set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With, token"
   Header set Access-Control-Allow-Credentials "true"
   &lt;/IfModule&gt;
  </code></pre>
  
  <p>This had the effect of at least letting my GET request to pass. </p>
  
  <p>B/ in my index.php</p>
  
  <pre><code>header("Access-Control-Allow-Origin: *")
  header("Access-Control-Allow-Credentials: true");
  header("Access-Control-Max-Age: 1000");
  header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
  header("Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE");
  </code></pre>
  
  <p>Same effect as .htaccess, only GET request passes, with OPTIONS . I also saw the my Access-Control-Allow-Origin would be "*, null" and i would get an error stating that only one is allowed. </p>
  
  <p>C. <a href="https://github.com/barryvdh/laravel-cors" rel="nofollow noreferrer">https://github.com/barryvdh/laravel-cors</a>
  In AuthServiceProvider, i tried both these. Only one at a time, not at the same time.</p>
  
  <pre><code>        Route::group([ 'middleware' =&gt; 'cors'], function() {
              Passport::routes();
          });
  
      Passport::routes(null, ['middleware' =&gt; [ \Barryvdh\Cors\HandleCors::class ]]);
  </code></pre>
  
  <p>D. Created a custom middle with this code</p>
  
  <pre><code>    public function handle($request, Closure $next)
      {
                  return $next($request)
          -&gt;header('Access-Control-Allow-Origin', '*')
          -&gt;header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
      }
  
  </code></pre>
  
  <p>I dumped my $_SERVER and could not find the HTTP_ORIGIN, HTTP_REFERER. I did get my HTTP_REMOTE_ADDR</p>
  
  <p>What is even more frustrating was that my app was working correctly, and I just suddenly started having the issue (back-end hosted on bluehost)</p>
  
  <hr>
  
  <p>Edit: Sample request</p>
  
  <pre><code>var data = new FormData();
  
          data.append('grant_type', 'password');
          data.append('client_id', '2');
          data.append('client_secret', 'secret_token');
          data.append('scope', '*');
  
          data.append('username', 'mail');
          data.append('password', 'pwd');
  
  
          var link = (mydomain in https) + '/oauth/token';
          fetch(link, config)
              .then((response) =&gt; response.json())
              .then((responseJson) =&gt; {
                  console.log(responseJson);
  
              })
              .catch(err =&gt; {
                  console.log(err);
              })
  </code></pre>