Doubt with API access - using Angular - typescript

Question

I set up a website to study a store Woocommerce, activated the api and generated the keys.

At the root of the added site on . htaccess, is that in the correct location?:

# Permite acesso ao pacote Font Awesome
<FilesMatch ".(ttf|otf|woff)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>

But I’m having the mistake:

Here is the full code for testing:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import * as WC from 'woocommerce-api';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  WooCommerce: any;
  products:any[];


  constructor(public navCtrl: NavController) {

  this.WooCommerce = WC({
       url:"http://wooionic.comajudacoletiva.com.br/",
       consumerKey:"ck_899d1c4011cab2bde1f04cd52704c248f155ecdc",
       consumerSecret:"cs_cc90feaf8467c0a53679be89f137557cdc7acbe5"
     });

        this.WooCommerce.getAsync("products").then( (data) => {
          console.log(JSON.parse(data.body));
         // this.products = JSON.parse(data.body).products;
        }, (err) => {
          console.log(err)
        })

  }

}

Answer 1

I believe that being Ionic it is possible to leave more permissive if it is in a webView (mobile app), but since you have control over the site, simply remove the FilesMatch, just like this in your . htaccess:

# Permite requisições de qualquer origem
Header set Access-Control-Allow-Origin "*"

Of course this will release any source to access, I recommend you read this excellent reply from @mgibsonbr:

• Ajax cross-Omain request with pure Javascript (no Apis)

Note that if you are using IIS (yes PHP runs on IIS through Fast-CGI or CGI) then you should not use . htaccess and yes create a file called htaccess in the root folder of Subdomain web.config instead of a .htaccess, take care there may already be one web.config, in this case make a backup and edit the original, should look something like:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
       <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>