Angular 4和Woocommerce API。 Http GET可以工作,但http POST不起作用

时间:2017-05-17 12:43:05

标签: angular http-post woocommerce-rest-api oauth-1.0a

我正在尝试通过HTTP POST方法通过Woocommerce API添加产品。

这是授权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 headers

GET headers

1 个答案:

答案 0 :(得分:0)

createProduct()方法有两个问题:

  • 您没有像使用getProducts()方法那样使用OAuth标头附带请求。

  • 这是一个CORS(跨域)问题。 您的浏览器(不是Angular)在发送实际POST请求之前发送OPTIONS请求。 实际上,您的服务器会丢弃OPTIONS请求,因为未经过身份验证。 有关详细信息,请阅读this answer。您是否尝试过设置内容类型'标题为' application / x-www-form-urlencoded'或者' multipart / form-data'?我认为这会导致浏览器在发送POST请求之前不发送OPTIONS请求。

因此,即使您解决了第一个问题(缺少OAuth标头),由于第二个问题,您可能仍然无法发布POST。