title: Axios Cors error in VueJs ( using Quasar framework ) on Laravel API
body: <p>I am using this framework <a href="https://quasar.dev/" rel="nofollow noreferrer">https://quasar.dev/</a> for my Front-End and Laravel for my API Back-End. I am trying to login using axios POST but I keep getting a CORS error:</p>
  
  <p>On my Front-End I'm running npm run dev and get the <a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a> local server. As for the Laravel API I am using a xampp webserver that's on <a href="http://localhost" rel="nofollow noreferrer">http://localhost</a> but on default port I assume.</p>
  
  <p><strong>The error:</strong></p>
  
  <blockquote>
    <p>Access to XMLHttpRequest at '<a href="http://localhost/vuecommerce-api/api/login" rel="nofollow noreferrer">http://localhost/vuecommerce-api/api/login</a>' from origin '<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.</p>
  </blockquote>
  
  <p><strong>Axios call:</strong></p>
  
  <pre><code>const Store = new Vuex.Store({
  modules: {
    // example
  },
  
  actions: {
    async retrieveToken (context, credentials) {
      var url = 'http://localhost/vuecommerce-api/api/login'
      var post = {
        username: credentials.username,
        password: credentials.password
      }
  
      return new Promise((resolve, reject) =&gt; {
        axios({
          method: 'post',
          url: url,
          mode: 'no-cors',
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json'
          },
          withCredentials: true,
          credentials: 'same-origin',
          data: post
        })
          .then(response =&gt; {
            const token = response.data.access_token
  
            localStorage.setItem('access_token', token)
            context.commit('retrieveToken', token)
            resolve(response)
            // console.log(response);
            // context.commit('addTodo', response.data)
          })
          .catch(error =&gt; {
            console.log('aici error')
            console.log(error)
            reject(error)
          })
      })
      ...
  </code></pre>
  
  <blockquote>
    <p>Important mention, for the login I am using Laravel Passport via this tutorial <a href="https://www.youtube.com/watch?v=GRhkhSzyApc&amp;t=300s" rel="nofollow noreferrer">https://www.youtube.com/watch?v=GRhkhSzyApc&amp;t=300s</a></p>
  </blockquote>
  
  <p><strong>Weird thing:</strong></p>
  
  <p>I have created a Cors middleware for my Laravel Back-End and added it to the endpoints:</p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Middleware;
  
  use Closure;
  
  class Cors
  {
      /**
       * Handle an incoming request.
       *
       * @param  \Illuminate\Http\Request  $request
       * @param  \Closure  $next
       * @return mixed
       */
      public function handle($request, Closure $next)
      {
          return $next($request)
              -&gt;header('Access-Control-Allow-Origin', '*')
              -&gt;header('Access-Control-Allow-Method', '*')
              -&gt;header('Access-Control-Allow-Headers', '*')
              -&gt;header("Access-Control-Allow-Credentials", true)
              -&gt;header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
      }
  }
  </code></pre>
  
  <blockquote>
    <p>On another page I make a Axios GET request to another endpoint for getting the products, and that one works.</p>
  </blockquote>
  
  <p><strong>If this helps with anything:</strong></p>
  
  <pre><code>/**
   * POST Login
   * 
   * @var \Illuminate\Http\Request
   * 
   * @return \Illuminate\Http\JsonResponse;
   */
  public function login (Request $request) {
      print response()-&gt;header('')
      exit('request');
  
      $http = new \GuzzleHttp\Client();
      $login_endpoint = config('services.passport.login_endpoint');
      $post = [
                  'form_params' =&gt; [
                      'grant_type' =&gt; 'password',
                      'client_id' =&gt; config('services.passport.client_id'),
                      'client_secret' =&gt; config('services.passport.client_secret'),
                      'username' =&gt; $request-&gt;username,
                      'password' =&gt; $request-&gt;password,
                  ]
              ];
  
      // Request
      print response()-&gt;json($request-&gt;all());
      exit('request');
  
      // Oauth
      // print response()-&gt;json($post);
      // exit('request');
  
      try {
          $response = $http-&gt;post($login_endpoint, [
              $post
          ]);
  
          print response()-&gt;json($response);
          exit('gata');
  
          return $response-&gt;getBody();
      }
      catch(\GuzzleHttp\Exception\BadResponseException $e) {
          // Error
          // print response()-&gt;json($e-&gt;getMessage());
          // exit('error');
          if($e-&gt;getCode() == 400) {
              return response()-&gt;json('Invalid Request. Please enter a username or password.', $e-&gt;getCode());
          }
          elseif($e-&gt;getCode() == 401) {
              return response()-&gt;json('Your credentials are incorrect. Please try again.', $e-&gt;getCode());
          }
      }
  }
  </code></pre>
  
  <p>It never reaches the php function because of CORS, so none of my prints and exists work.</p>