CORS error in firefox and ERR_SPDY_PROTOCOL_ERROR in chrome on axios post/put to API when custom header used

[WhyIExist]

I'm using axios to make a axios.post and axios.put call in my vue webapp. In my component this action is performed on form submission via an API.

I'm getting status undefined (failed) in my console and not getting any response. I'm getting the following error:

In chrome

net::ERR_SPDY_PROTOCOL_ERROR

Firefox

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [(https://doorstepapi.000webhostapp.com/api/item)] (Reason:

CORS request did not succeed)

This is the code

let url = "https://doorstepapi.000webhostapp.com/api/item";

      axios
        .post(
          url,
          {
            MRP: this.mrp,
            additional_info: this.additionalInfo,
            allcat: this.allcat, //doubted
            currentPrice: this.currentPrice,
            description: this.description,
            disPriority: this.disPriority, //doubt
            dis_val: this.disVal,
            discount: this.discount,
            home: this.home, // doubted
            image: this.image,
            item_id: this.itemId,
            msp: this.msp,
            name: this.name,
            productId: productId,
            thumbnail: this.thumbnail,
            sku: this.sku,
            stock: this.stock,
            qty: this.qty,
            unit: this.unit,
            uploadedAt: new Date(),
            updatedAt: new Date()
          },
          {
            headers: {
              "api-token": "itsaMatch"
            }
          }
        )
        .catch(err => {
          console.log("err.response" + err.response);
          console.log("err.request" + err.request);
          console.log("err.message" + err.message);
          console.log("err.status" + err.status);
        });

Has anybody came across such error too? Would you please share on how to resolve this.

Code for CORS in API

CORSMiddleware

class CORSMiddleware
{
    public function handle($request, Closure $next)
    {

        $headers = [
            'Access-Control-Allow-Origin'      => '*',
            'Access-Control-Allow-Methods'     => 'GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS',
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Max-Age'           => '86400',
            'Access-Control-Allow-Headers'     => 'Origin, X-Requested-With, Content-Type, Accept, Authorization,api-token',
            'Access-Control-Expose-Headers'     => 'api-token'
        ];

        if ($request->isMethod('OPTIONS')) {
            return response()->json('{"method":"OPTIONS"}', 200, $headers);
        }

        $response = $next($request);
        foreach ($headers as $key => $value) {
            $response->header($key, $value);
        }

        return $response;
    }
}

in .htaccess

Header set Access-Control-Allow-Origin "*" 
Header set  Access-Control-Allow-Methods "GET,POST,PUT,DELETE,OPTIONS"
Header set Access-Control-Allow-Credentials "true"

[WhyIExist]

Tried using Access-Control-Expose-Headers too, didn't worked