title: Can't access api post method, request always OPTIONS
body: <p>i'm trying to create login form with nuxtjs as front end and slim php as backend api, when i tried to access the API, i see the request method that i send is <strong>OPTIONS</strong> not <strong>POST</strong>, and in chrome dev console error shown that the request is blocked (CORS).
  I know i have to set <strong>Access-Control-Allow-Methods</strong> add <strong>OPTIONS</strong> into it, but still failed, where to set that in nuxt js(nuxt.config) or slim php?</p>
  
  <p>I have tried to access the api from postman and it work's just fine, i can see <em>Access-Control-Allow-Methods</em> headers has OPTIONS in it, but still it failed when i tried in vue apps</p>
  
  <pre><code>commons.app.js:434 OPTIONS http://localhost:8080/login 401 (Unauthorized)
  
  Access to XMLHttpRequest at 'http://localhost:8080/login' from origin 'http://localhost:3000' 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.
  </code></pre>
  
  <p>Code from slim php (API)</p>
  
  <p>routes.php</p>
  
  <pre><code>// login routes
  $app-&gt;post('/login', function (Request $request, Response $response, array $args) {
  
          $input = $request-&gt;getParsedBody();
          $sql = "SELECT * FROM groups
                  LEFT JOIN users_groups ON groups.groups_id = users_groups.users_groups_id
                  LEFT JOIN users ON users_groups.users_groups_id = users.id
                  WHERE users.email = :email";
          $sth = $this-&gt;db-&gt;prepare($sql);
          $sth-&gt;bindParam("email", $input['email']);
          $sth-&gt;execute();
          $user = $sth-&gt;fetchObject();
  
          // verify email address.
          if (!$user) {
              $container-&gt;get('logger')-&gt;info("Error trying to login with email : ".$input['email']);
              return $this-&gt;response-&gt;withJson(['error' =&gt; true, 'message' =&gt; 'These credentials do not match our records.']);
          }
  
          // verify password.
          if (!password_verify($input['password'], $user-&gt;password)) {
              $container-&gt;get('logger')-&gt;info("Error trying to login with password : ".$input['password']);
              return $this-&gt;response-&gt;withJson(['error' =&gt; true, 'message' =&gt; 'These credentials do not match our records.']);
          }
  
          // cek apakah sudah login sebelumnya hari ini untuk user ini
          $absensiSql = "SELECT * FROM users_presensi WHERE user_id = :userID";
          $sth = $this-&gt;db-&gt;prepare($absensiSql);
          $sth-&gt;bindParam("userID", $user-&gt;id);
          $sth-&gt;execute();
          $absensi = $sth-&gt;fetchObject();
  
          // jika belum absen, masukan user ke absensi
          if(!$absensi){
              $status = 1;
              $absensiSql = "INSERT INTO users_presensi(user_id, statuss) VALUES (:userID, :statuss)";
              $sth = $this-&gt;db-&gt;prepare($absensiSql);
              $sth-&gt;bindParam("userID", $user-&gt;id);
              $sth-&gt;bindParam("statuss", $status);
              $sth-&gt;execute();
              // $absensi = $sth-&gt;fetchObject();s
          }
  
          $settings = $this-&gt;get('settings'); // get settings array.
  
          $token = JWT::encode(['id' =&gt; $user-&gt;id, 'email' =&gt; $user-&gt;email, 'level' =&gt; $user-&gt;groups_level], $settings['jwt']['secret'], "HS256");
  
  // i already set the header here
          return $this-&gt;response
          -&gt;withHeader('Access-Control-Allow-Origin', '*')
          -&gt;withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization')
          -&gt;withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
          -&gt;withHeader('Set-Cookie', "token=$token; httpOnly")
          -&gt;withJson(['token' =&gt; $token]);
  
      })-&gt;setName('login');
  </code></pre>
  
  <p>my nuxtjs auth config
  nuxt.config.js</p>
  
  <pre><code>/*
    ** Nuxt.js modules
    */
    modules: [
      '@nuxtjs/vuetify',
      // Doc: https://axios.nuxtjs.org/usage
      '@nuxtjs/axios',
      '@nuxtjs/pwa',
      '@nuxtjs/eslint-module',
      '@nuxtjs/auth'
    ],
    /*
    ** Axios module configuration
    ** See https://axios.nuxtjs.org/options
    */
    axios: {
    },
  
    /**
     * set auth middleware
     */
    router: {
      middleware: ['auth']
    },
    auth: {
      strategies: {
        local: {
          endpoints: {
            login: { url: 'http://localhost:8080/login', method: 'post', propertyName: 'token' }
          }
          // tokenRequired: true,
          // tokenType: 'bearer'
        }
      }
    }
  </code></pre>
  
  <p>method login from login.vue</p>
  
  <pre><code>   loginPost: function () {
        this.$auth.loginWith('local', {
          data: {
            username: this.loginData.username,
            password: this.loginData.password
          }
        })
      }
  </code></pre>
  
  <p>in postman, the result is token itself, and i think there shouldn't be cors error happen, but who's know.</p>