Request header field User-Agent is not allowed by Access-Control-Allow-Headers

Viewed 1701

I get some error with accessing woocommerce api "getAsync" in my ionic ios app. It says: [Error] Failed to load resource: Request header field User-Agent is not allowed by Access-Control-Allow-Headers. Fetch API cannot load https:/WEB_BASE/wp-json/wc/v2/products/categories?parent=0&consumer_key=MY_SONSUMER_KEY&consumer_secret=MY_CONSUMER_SECRET due to access control checks.

The code is running well in Android platform, also on ios 10. The error above happen on ios 11.

this.wooCommerce.getAsync("products/categories?parent=0").then(
      data => {
        this.categories = JSON.parse(data.body);
      },
      err => {
        console.log(err);
      }
    );

With this error, I can't get the product on my woocommerce data. Can anyone help me on this?

1 Answers

I had the error missing user-agent ... Am using firefox with Wordpress setup with ssl on localhost to avoid having to use proxy in ionic-config.

I checked the code for Woocommerce API package and it sends a user-agent....

headers: {
  'User-Agent': 'WooCommerce API Client-Node.js/' + this.classVersion,
  'Accept': 'application/json'
}

I added to the wordpress .htaccess "user-agent" ( not sure if this is the best way to go but works for now ) to read...

Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization, user-agent"
RewriteCond %{HTTP_USER_AGENT} !^WooCommerce\ API\ Client-Node.js/1\.4\.2

1.4.2 is the version number for the npm package.

Error disappeared and now I have content returned to my request.

Related