cors origin restriction WordPress WooCommerce


#1

I have a WordPress website with WooCommerce plugin and I’m trying to load that website into a mobile application with the ionic4 framework, my app work with no problems on Andriod but I got this error when I run my app on the iOS device

Origin http://localhost:8100 is not allowed by Access-Control-Allow-Origin.
[Error] Fetch API cannot load http://www.mywebsite.com/wp-json/wc/v3/products?******** due to access

my problem is I can’t figure how to set CORS into server-side.

below is my .htaccess file code

RewriteEngine On                  
RewriteCond %{REQUEST_METHOD} OPTIONS RewriteRule ^(.*)$ $1 [R=200,L] 
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.php [L]
</IfModule>

# END WordPress

I’m asking if there any way to set the Access-Control-Allow-Origin in my case to solve this problem, is there any missing line of code, or should I edit any other file in my WordPress file to set the headers into the right way


#2

This is my htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

then add this to your ionic.config.json

  "proxies": [
    {
      "path": "/index.php/",
      "proxyUrl": "http://local-wordpress-url-here"
    }
  ],

I have that set up working fine for my development tasks…

References…
https://blog.ionicframework.com/handling-cors-issues-in-ionic/