.htaccess not working

1

I am trying to change my app to use devilbox as a development environment. But some things still couldn’t make it work. I isolated the problem to a simple case to try to solve by parts, first I can’t make my .htaccess work:

RewriteEngine On
RewriteBase /api
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [QSA,L]
RewriteRule .* - [e=AUTHORIZATION:%{HTTP:Authorization}]
Options -Indexes

My directory tree:

devilbox/data/www/test-api/
devilbox/data/www/test-api/index.php
devilbox/data/www/test-api/new-dir/
devilbox/data/www/test-api/api/
devilbox/data/www/test-api/api/index.php

My devilbox/data/www/test-api/api/index.php:

<?php
header("Access-Control-Allow-Origin: http://localhost:8080");
header("Content-Type: multipart/form-data; application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Expose-Headers: Authorization");
header("Access-Control-Allow-Headers: Origin, Content-Type, Authorization, Access-Control-Allow-Credentials");

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    http_response_code(200);
    echo json_encode(array("message" => "OK!"));
    exit(0);
}

echo "Hi!";

I want all calls to be directed to my index.php inside the api/ directory, because my project uses a router to handle the routes. But it does not work. When having on my client vuejs make a request like:

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", 'http://test-api.loc/new-dir');
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send(JSON.stringify({obj: "Hi"}));

I get this from the browser by analyzing netwok from the developer tools:

General

Request URL: http://test-api.loc/test
Request Method: OPTIONS
Status Code: 301 Moved Permanently
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrad