Refused to set unsafe header "User-Agent"

[mtrabelsi]

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)

[Riaan-ZA]

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]

@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

[logicappsource]

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

[OArnarsson]

@claudiosanches any news on a new npm release?

[OArnarsson]

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.

[claudiosanches]

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

[PlusA2M]

Just research it a little, it's caused by Chrome's new attempt to freeze the UA string. Firefox does not have this issue. That might related the http.js from axios, which would set the UA string and the Chrome will keep complain about that.

[climba03003]

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

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

[OArnarsson]

@claudiosanches any news on this?

[AurelianSpodarec]

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

[PierreSchmitt]

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 ?

Hi there. I changed it directly in the source code as suggested and it works for me.

... isn't there a better solution for that?

please help!

[OArnarsson]

@claudiosanches would you be willing to add collaborators on this project to lend you a hand?

[GiuB]

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
})

[AyeshaKhan07]

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",
    ...
  }

[Cornettoo]

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

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

[anoblet]

This broke PUT/POST requests for me (https://github.com/woocommerce/woocommerce-rest-api-js-lib/issues/103).

axiosConfig: { headers: {} },

[arnoldgamboa]

Any update on this bug fix?

[foysalhasan]

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

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

hello brother could you please tell me how to get product by axios using this method????

[foysalhasan]

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.

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)

Brother i'm faceing the same issue pease tell me how to solve it...do you have source code?

[ghost]

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.

[juanfrantomas]

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.

It works for me! Thanks