Angular 4 and Woocommerce API. Http GET works but http POST doesn't works

Question

I'm trying to add a product through an Woocommerce API via the HTTP POST method.

This is the authorize outh1.0a

  url = 'http://localhost/szafa-bobasa/wp-json/wc/v2/'

  oauth = OAuth({
        consumer: {
           key: 'ck_28e35bab98e641ede9814453320968b99ad17c3f',
        secret: 'cs_f7185d02a5da24a6ae85503d9add65334f11a75d'
        },
        signature_method: 'HMAC-SHA256',
        hash_function: function(base_string, key) {
              return CryptoJS.HmacSHA256(base_string, key).toString(CryptoJS.enc.Base64);
        }

    })

This is a function that gets products and that works

 getProducs() {

    let enandpoint = "products"
    let requestData = {
        url: this.url + enandpoint,
        method: 'GET'
    };

    let params =  this.oauth.authorize(requestData)
    let headers = new Headers();
    headers.append('Accept', 'application/json')

    let options = new RequestOptions({ params: params, headers: headers });

    this.http.get( requestData.url, options )
    .subscribe(data => {
        console.log(data);
    })

  }

This is a POST function doesn't works

createProduct() {

    let enandpoint = "products"

    let requestData = {
        url: this.url + enandpoint,
        method: 'POST'
    }

    let params =  this.oauth.authorize(requestData)

    let headers = new Headers()
    headers.append('Content-Type', 'application/json; charset=utf-8')
    headers.append('Accept', 'aapplication/json')

    let options = new RequestOptions({ params: params, headers: headers })


    let body = { "name": "Premium Quality",
  "type": "simple",
  "regular_price": "21.99",
  "description": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",
  "short_description": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.",
  "categories": [],
  "images": [
    {
      "src": "http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/T_2_front.jpg",
      "position": 0
    },
    {
      "src": "http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/T_2_back.jpg",
      "position": 1
    }
  ] }


this.http.post( this.url + enandpoint, body, options)
        .map((res:Response) => res.json()) 
        .catch((error:any) => Observable.throw(error.json().error || 'Server error'))
        .subscribe( data => { console.log(data) }, 
                    err => { console.log(err) })
    }

I tested in the Postman and POST request worked but If I send a request via Angular Http POST I get an error: {"errors":[{"code":"woocommerce_api_authentication_error","message":"Invalid Signature - provided signature does not match"}]}

What can be a problem?

POST headers

GET headers

score 0 · Answer 1 · answered Oct 11 '17 at 07:13

There are 2 problems in the createProduct() method:

You do not accompany your request with the OAuth header, as you do in the getProducts() method.
This is a CORS (cross-domain) issue. Your browser (not Angular) is sending an OPTIONS request before sending the actual POST request. Effectively, your server discards the OPTIONS request as not authenticated. Please read this answer for more info. Have you tried to set a 'content-type' header as 'application/x-www-form-urlencoded' or 'multipart/form-data'? I think is would result in the browser not to send an OPTIONS request before sending the POST request.

So, even if you solve the first problem (with the lack of OAuth header), you may still not be able to POST, because of the second problem.

Angular 4 and Woocommerce API. Http GET works but http POST doesn't works

1 Answers1