Angular 4 和 Woocommerce API。 Http GET 有效，但 http POST 无效

Posted 2023-02-19

【中文标题】Angular 4 和 Woocommerce API。 Http GET 有效，但 http POST 无效

【英文标题】：Angular 4 and Woocommerce API. Http GET works but http POST doesn't works

【发布时间】：2017-10-16 22:30:09

【问题描述】：

我正在尝试通过 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】：

createProduct()方法有2个问题：

您不会像在 getProducts() 方法中那样在请求中附带 OAuth 标头。

这是一个 CORS（跨域）问题。 您的浏览器（不是 Angular）在发送实际 POST 请求之前发送了一个 OPTIONS 请求。 实际上，您的服务器将 OPTIONS 请求丢弃为未通过身份验证。 请阅读this answer 了解更多信息。您是否尝试将“content-type”标头设置为“application/x-www-form-urlencoded”或“multipart/form-data”？我认为这会导致浏览器在发送 POST 请求之前不发送 OPTIONS 请求。

因此，即使您解决了第一个问题（缺少 OAuth 标头），您可能仍然无法 POST，因为第二个问题。