WooCommerce OAuth 1.0 + JWT authentication with JS/React

Puuh, after a full day of research in total, I realized the problem..

First of all, the code above is not supposed to work actually. The oauth parameters have to go into the query string apparently. That’s how all WooCommerce client APIs do it:

post(endpoint, data_params, params = null) {
  const method = 'POST'

  const oauth_params = this._getOAuth().authorize({
    url: 'https://boundlessmaps.gis-ops.com' + '/wp-json/wc/v3' + endpoint + WooCommerceAPI._normalizeQueryString(params),
    method: method
  })

  return this._request.post(endpoint, data_params, {
    params: oauth_params
  })
}

So that should work in theory, but still doesn’t. The OPTIONS preflight fails. Now that’s apparently indeed a server-side problem. Basically WooCommerce has a limitation which I didn’t fully understand tbh. The way around is to avoid a preflight, which apparently is possible if you avoid Content-Type: application/json header and a body. Using axios, you just put all parameters in the query string and leave the body and headers empty. This wouldn’t work on all servers, but it does with WooCommerce luckily.

References:

The working solution is:

post(endpoint, data_params) {
  const method = 'POST'

  const oauth_params = this._getOAuth().authorize({
    url: 'https://boundlessmaps.gis-ops.com' + '/wp-json/wc/v3' + endpoint + WooCommerceAPI._normalizeQueryString(data_params),
    method: method
  })

  return this._request.post(endpoint, null, {
    params: oauth_params
  })
}

Happy hacking;)

Related Posts: