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

Я пытаюсь добавить продукт через 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

заголовки GET


person Lukasz    schedule 17.05.2017    source источник


Ответы (1)


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

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

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

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

person Paul Isaris    schedule 11.10.2017