Ionic mobile application accesses Prestashop Web service(Get method works, but Post not)

[yifeilyf]

Hi guys,

 

I am working on an Ionic mobile application, and this app needs to interact with Prestashop online shop. First of all, I set up my web service on back office and access external program to access by Get and Post method (image 1)

 

First of all, I retrieve product information from Prestashop online shop throughout Web service, and it works perfectly. The following code is one of my Get methods.
 

  loadProducts(){
    this.http.get('http://www.linkarwine.com/api/products/?ws_key='+ this.apikey +'&output_format=JSON&display=full&filter[id]=[20|23|26|40|44|64|68|39|66|72]').map(res => res.json()).subscribe(data => {
      //console.log(data);
      //console.log(data['products'][0]['id']);
      this.products = data.products;
      //console.log(this.products[0]['manufacturer_name']);
    }, (err) => {
      console.log(err);
    })
  }

Currently, I am working on customer signup page, which means I need to post new customer data into Prestashop throughout Web Service.  This image (image 3) shows that my application "signup" page. The following code is my "signup" function, and you could find my post method down below.

 

signup(){

    let customerData = {
      customer: {}
    }

    customerData.customer = {
      "email": this.newUser.email,
      "first_name": this.newUser.first_name,
      "last_name": this.newUser.last_name,
      "password": this.newUser.password,
      "billing_address": {
        "first_name": this.newUser.first_name,
        "last_name": this.newUser.last_name,
        "address_1": this.newUser.billing_address.address_1,
        "address_2": this.newUser.billing_address.address_2,
        "city": this.newUser.billing_address.city,
        "state": this.newUser.billing_address.state,
        "postcode": this.newUser.billing_address.postcode,
        "country": this.newUser.billing_address.country,
        "email": this.newUser.email,
        "phone": this.newUser.billing_address.phone
      },
      "shipping_address": {
        "first_name": this.newUser.first_name,
        "last_name": this.newUser.last_name,
        "address_1": this.newUser.shipping_address.address_1,
        "address_2": this.newUser.shipping_address.address_2,
        "city": this.newUser.shipping_address.city,
        "state": this.newUser.shipping_address.state,
        "postcode": this.newUser.shipping_address.postcode,
        "country": this.newUser.shipping_address.country
      }
    }

    if(this.billing_shipping_same){
      this.newUser.shipping_address = this.newUser.billing_address
    }

    //send data to prestashop throughout API
    let link = 'http://www.linkarwine.com/api/customers/?ws_key='+ this.apikey + '&output_format=JSON&display=full';
    

    this.http.post(link, customerData).map(res => res.json()).subscribe(data => {
      console.log(data);
    }, (err) => {
      console.log(err);
    });
  }

}

However, it does not work. This image (image 4) is what I got about its error.

I already asked many people, and they told me that it may be caused by Cross-Origin Resource Sharing (CORS) because I try to change chrome into firefox, and it does mention about that.

 

Then I add some code into my .htaccess file throughout web hosting file manager. like this

 

<IfModule mod_headers.c>

<FilesMatch "\.(ttf|ttc|otf|eot|woff|svg)$">

Header set Access-Control-Allow-Origin "*"

</FilesMatch>

</IfModule>

but it does not work.

 

Then I try to use postman to test my url.

As always, my get method works fine.

But I get this (image 5) when I try to use post, which may cause by data format??? I know XML format is default for Prestashop. According to this image (image 6), it should not be related to CORS problem, right???????

 

Anyone could give me some suggestion or information about it.

Thanks so much

 

Yifei

 

 

Edited June 14, 2017 by yifeilyf (see edit history)

[yifeilyf]

I ask someone, and they talk me that Prestashop cannot post by itself, and it needs to install CORS into it. However, I do not know how to setup CORS.

 

 

Also, I found two links which may relate to my question.
https://stackoverflow.com/questions/30868991/update-put-a-json-object-with-ajax-prestashop/44502249#44502249
http://forge.prestashop.com/browse/PSCSX-3025

https://stackoverflow.com/questions/25526949/adding-products-to-prestashop-1-6-0-9-with-webservice

 

Please have a look.

Cheers

Edited June 13, 2017 by yifeilyf (see edit history)

[yifeilyf]

One of my friends gives me some suggestion about changing the code. I add the code "JSON.stringify". I use simple data to test it.

    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    let body = {
      message: '123'
    };

    this.http.post(link, JSON.stringify(body), {headers: headers}).map(res => res.json()).subscribe(data => {
      console.log(data);
      console.log(body);
    }, (err) => {
      console.log(err);
    });

It does not work but the error is different. The following image is what I got about the error. He told me that Prestashop maybe only accepts retrieve data from the server. He asks me whether I could install npm CORS into PrestaShop to enable CORS. This is the link "https://github.com/expressjs/cors", but I do not know how to do it. 

 

 

I think that Prestashop could not enable CORS as the default setting. Anyone know how to enable it?????

 

Cheers

Edited June 14, 2017 by yifeilyf (see edit history)

[moatazattia]

did u found any solutions?

[rvkvino]

I'm also having the same problem to post the data from postman to prestashop web service, get method working well. I need to use prestashop web service in ionic1 app.  I'm also getting same problem as @yifeilyf posted in 1st.

 

[abouzouzou]

i added in the dispatcher.php header

//to access from external browser
header('Access-Control-Allow-Origin: *');
header( 'Access-Control-Allow-Headers: Authorization, Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers,Output-Format');
header( 'Access-Control-Allow-Methods: GET, OPTIONS, HEAD, PUT, DELETE');
header( 'Access-Control-Allow-Credentials: true');

then modified like this after in the code

 

if ($method === 'OPTIONS') {
    die('200');
    ob_end_flush();
}else{
    if (isset($_SERVER['PHP_AUTH_USER'])) {
    $key = $_SERVER['PHP_AUTH_USER'];
} elseif (isset($_GET['ws_key'])) {
    $key = $_GET['ws_key'];
} else {
    header($_SERVER['SERVER_PROTOCOL'].' 401 Unauthorized');
    header('WWW-Authenticate: Basic realm="Welcome to PrestaShop Webservice, please enter the authentication key as the login. No password required."');
    die('401 Unauthorized');
}
    
}