woocommerce-rest-api-js-lib: Refused to set unsafe header "User-Agent"

sample code

const api = new WooCommerceRestApi({
  url: "http://my-personal-store.com",
  consumerKey: "ck_xxxxxxxxxx",
  consumerSecret: "cs_xxxxxxxx",
  version: "wc/v3"
});

const { data : categories } = await api.get(`products/categories`)

fires successfully and return the response but it also spit errors in Chrome console

Refused to set unsafe header “User-Agent”

It is also taking a lot of time to fetch (2-3s) due to throwing and catching (i guess)

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 5
Comments: 21 (2 by maintainers)

Most upvoted comments

I simply fixed it by adding an empty header object to axiosConifg.

const WooCommerce = new WooCommerceRestApi({
	url: '',
	consumerKey: '',
	consumerSecret: '',
	version: 'wc/v3',
	axiosConfig: {
	  headers: {}
	}
}),

Cornettoo on Jul 13, 2021

Having the same issue, the error is coming from the axios setting which is setting the user agent: "User-Agent": "WooCommerce REST API - JS Client/" + this.classVersion Removing it fixes the issue, but obviously this is hacking source code. Is there some way to get this working by over riding it using the axiosConfig option available to WooCommerceRestApi ?

axiosConfig: { headers: {} }, seems to do the trick for now.

OArnarsson on Jun 3, 2020

This broke PUT/POST requests for me (#103).
axiosConfig: { headers: {} },

const api = new WooCommerceRestApi({
    url: url,
    consumerKey: consumerKey,
    consumerSecret: consumerSecret,
    version: "wc/v3",
    axiosConfig:{
      headers:{
        "Content-Type": "application/json;charset=UTF-8"
        }
    }
  });

Add content-type header and it works. The reason is if you leave it out, Axios sends a text/plain content header for PUT/POST request.

kenowusu1 on Sep 22, 2022

Soo, I don’t think this works yet? I got the same error.

AurelianSpodarec on Sep 28, 2020

I’ll update it soon. Thanks for let me know.

claudiosanches on Jun 3, 2020

I found a decent fix using axios interceptor to force removing custom woocommerce User-Agent 😊

import Vue from 'vue'
import axios from 'axios'
import WooCommerceRestApi from '@woocommerce/woocommerce-rest-api'

/**
 * New JavaScript library for WooCommerce REST API,
 * supports CommonJS (CJS) and Embedded System Module (ESM).
 * @see https://www.npmjs.com/package/@woocommerce/woocommerce-rest-api#esm-example
 */
Vue.prototype.$WC = new WooCommerceRestApi({
  url: process.env.NUXT_ENV_BASE_PATH,
  consumerKey: process.env.NUXT_ENV_WOO_CONSUMER_KEY,
  consumerSecret: process.env.NUXT_ENV_WOO_CONSUMER_SECRET,
  version: 'wc/v3',
})


// Custom interceptor to remove woocommerce custom User-Agent (not allowed in Chrome/Safari)
axios.interceptors.request.use(function (config) {
  const { headers = {} } = config || {}
  if (headers['User-Agent']) delete config.headers['User-Agent']

  return config
})

GiuB on Jan 26, 2021

@PlusA2M @claudiosanches
I think it should be fixed in #38

Moreover, I think new version at NPM should publish as soon as possible.

climba03003 on Jun 23, 2020

Having the same issue, the error is coming from the axios setting which is setting the user agent: "User-Agent": "WooCommerce REST API - JS Client/" + this.classVersion Removing it fixes the issue, but obviously this is hacking source code. Is there some way to get this working by over riding it using the axiosConfig option available to WooCommerceRestApi ?

Riaan-ZA on May 18, 2020

I fixed it by using this link in package.json

"dependencies": {
    ...
    "@woocommerce/woocommerce-rest-api": "https://github.com/woocommerce/woocommerce-rest-api-js-lib#master",
    ...
  }

AyeshaKhan07 on Jun 5, 2021

I experience same issue, wonder when this is fixed damn dont want hacky solution

logicappsource on May 27, 2020

@mtrabelsi There seems to be a fix for this but it’s not coming through via npm install yet: https://github.com/woocommerce/woocommerce-rest-api-js-lib/commit/90b8bd5816d9ff1b84aacd718fe41c742ac43867

Riaan-ZA on May 18, 2020