Ionic for IOS with Wordpress

Ionic Framework ionic-v3
1

Hello,
I’m using ionic3 to build E-commerce app with Wordpress as a backend.
I’m using Woocommerce api to get products, orders, ect. this my code to configure it

import * as WC from "woocommerce-api";
Woocommerce = WC({
    url: this.url,
    consumerKey: this.consumerKey,
    consumerSecret: this.consumerSecret,
    wpAPI: true,
    queryStringAuth: true,
    version: "wc/v2"
  });
 let query = "products?" + "page=" + this.page;
    if (this.selected != "") query = "products?page=" + this.page;
    query = query + "&status=publish" + "&" + this.config.productsArguments;
    this.config.Woocommerce.getAsync(query).then((data) => {
        console.log(data)
    })

It worked on android Well but on Ios i have this error :

https://testsite.com/wp-json/wc/v2/products?include=2047%2C1828%2C1768%2C1767%2C1766%2C1765%2C1763&status=publish&order=desc&orderby=date&lang=en&currency=EGP&consumer_key=ck_xxxxxxxxxxxxxxxx&consumer_secret=cs_xxxxxxxxxxxxxxz
Failed to load resource: Origin httpsionic://localhost is not allowed by Access-Control-Allow-Origin.

2

@nazeeh

Did you check if the headers are set by your web- or proxy-server? I guess you can’t easily override them in that case…

This enable-cors.org/server.html is a good starting point - if the webserver is under your control. Otherwise you may have to talk to your hosting company.

3

@1antares1 ORS enabled this response headers using postman

access-control-allow-headers →Authorization, Content-Type
access-control-allow-methods →POST, GET, OPTIONS, PUT, DELETE
access-control-allow-origin →*
access-control-expose-headers →X-WP-Total, X-WP-TotalPages
allow →GET, POST
cache-control →no-transform, no-cache, no-store, must-revalidate
content-encoding →gzip
content-length →6009
content-type →application/json; charset=UTF-8
date →Fri, 11 Sep 2020 21:49:12 GMT
expires →Wed, 11 Jan 1984 05:00:00 GMT
link →<https://sit.com/wp-json/>; rel="https://api.w.org/"
pragma →no-cache
referrer-policy →no-referrer-when-downgrade
server →Apache
status →200
vary →Accept-Encoding,User-Agent
x-content-type-options →nosniff
x-powered-by →PHP/7.2.33
x-robots-tag →noindex
x-wp-total →6
x-wp-totalpages →1
4

@nazeeh Do not try Postman to validate the CORS since it runs itself from the Desktop (server) and “patches” certain things to let the Endpoint know that it is not a Browser directly as you do in Ionic.

Try to run the same from https://hoppscotch.io/ (previously called PostWoman) and confirm the answer, please.

5

@1antares1 response headers

Screen Shot 2020-09-12 at 12.25.22 AM
Screen Shot 2020-09-12 at 12.25.22 AM2560×1600 498 KB

6

@nazeeh

Mmmm! Therefore, it is successfully enabled.

I ask myself because the host’s response is:
Origin httpsionic://localhost is not allowed by Access-Control-Allow-Origin.

That protocol, where did you get it?

Could you request that URL from the Hoppscotch inside an angular own http: this.http.get(); and valid?

7

I have some requests to same server and worked well the issue only in this module

woocommerce-api

but any endpoint else work well to the same server

8

@1antares1
In my server on htaccess file i set the following lines of code:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods: "*"
Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization"

I get this error

Failed to load resource: Access-Control-Allow-Origin cannot contain more than one origin.

9

@nazeeh

Why not check with the Fiddler App, which tries to do Woocommerce as opposed to Postman / Hoppscotch?

Trace all requests, show required metadata and information, and validate that such plugin is missing or lacking.