No 'Access-Control-Allow-Origin'


#1

hi:
I want to access the woocommerce website

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

But I encounter the following error
I want to access the Vocommerce website
But I encounter the following error
I’ve read and realized I need to add Access-Control-Allow-Origin: * access to my project
But I do not know how to add it
is it correct?

My code:

import { Component , ViewChild } from ‘@angular/core’;
import { NavController ,Slides } from ‘ionic-angular’;
import * as WC from ‘woocommerce-api’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
Woocammerce:any;
products:any[];

@ViewChild(‘productSlides’)productSlides: Slides;

constructor(public navCtrl: NavController) {
this.Woocammerce=WC({
url:“http://mywebsite.com/”,
consumerKey:“111111111111111111111111111111111111”,
consumerSecret:“22222222222222222222222222222222222”
});
this.Woocammerce.getAsync(“products”).then((data) =>{
console.log(JSON.parse(data.body));
}, (err) => {
console.log(err)
})
}

}


#2

You cannot handle CORS in your App. The Server has to handle that correctly.
When you send a http request at first a preflight request is created. The answer for that request must deliver a header Access-Control-Allow-Origin=*

https://www.google.de/amp/s/blog.ionicframework.com/handling-cors-issues-in-ionic/amp/


#3

You can handle the CORS when debugging in browser by using CORS extension or by disabling the security of Chrome.
But you need to handle the CORS when you debug in app on server side, i was consuming woocommerce api ,so i edited it as follows->
1.Plugins->editor->woocomerceapi

right after <?php**
header(“Access-Control-Allow-Origin: *”);

2.Update File