Angular 4 и Woocommerce API. HTTP GET работает, но HTTP POST не работает

Question

Я пытаюсь добавить продукт через API Woocommerce через метод HTTP POST.

Это авторизация 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);
        }

    })

Это функция, которая получает продукты и работает

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

  }

Это функция POST не работает

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

Я тестировал в Postman и POST-запрос работал, но если я отправляю запрос через Angular Http POST, я получаю сообщение об ошибке: {"errors":[{"code":"woocommerce_api_authentication_error","message":"Invalid Signature - provided signature does not match"}]}

В чем может быть проблема?

POST-заголовки

ПОЛУЧИТЬ заголовки

Answer 1

В методе createProduct() есть 2 проблемы:

• Вы не сопровождаете свой запрос заголовком OAuth, как в методе getProducts().

• Это проблема CORS (междоменная). Ваш браузер (не Angular) отправляет запрос OPTIONS перед отправкой фактического запроса POST. По сути, ваш сервер отклоняет запрос OPTIONS как не прошедший проверку подлинности. Пожалуйста, прочитайте этот ответ для получения дополнительной информации. Вы пытались установить заголовок "content-type" как "application/x-www-form-urlencoded" или "multipart/form-data"? Я думаю, что это приведет к тому, что браузер не будет отправлять запрос OPTIONS перед отправкой запроса POST.

Таким образом, даже если вы решите первую проблему (с отсутствием заголовка OAuth), вы все равно не сможете выполнить POST из-за второй проблемы.