Can't read my API or particular API [React.js/Node.js/Axios/Fetch]

Question

I am really confused about this, if you told me that my code is wrong, I've tried the different API and it works. But there are several API that cannot be accessed in react.js in my case. Please help me and correct. You can try these API that don't work in react.js but always getting typescript fetching failed or network error:

1. http://pp53.azurewebsites.net/pp53service.svc/viewprovincelist
2. https://www.getpostman.com/collections/1d8df8b0b5bf27e5009b

The 1st is my API and the second is other. I've tried that API on Postman and in other programming language and other framework like ASP.NET MVC but it's not getting trouble anymore. But when I tried react.js with axios, fetch, even ajax that API won't work. Is there anyone could explain to me why? Because if you use this one https://api.myjson.com/bins/1cfkej or this one http://jsonplaceholder.typicode.com/todos there are no problem.

Thank you!!

Here's my code

import React from 'react';
import axios from 'axios';

export class viewDetailPP53 extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count : [] };        
    }

    componentDidMount(){
        var self = this;
        axios.get('http://pp53.azurewebsites.net/pp53service.svc/viewprovincelist')
        .then(function (results) {
            self.setState({ count: results.data });
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    render() { 
        return(
            <div>
                <table>
                    <thead>
                        <tr>
                            <th>column 1</th>
                            <th>column 2</th>
                        </tr>          
                    </thead>
                    <tbody>
                        {this.state.count.map((a, i) => <TableRow key = {i} count = {a} />)}
                    </tbody>
                </table>
            </div>
        );
    }
}

class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.count.idProvince}</td>
            <td>{this.props.count.province}</td>
         </tr>
      );
   }
}

Answer 1

Thank you for Dimitar Dimitrov for the clue. I solve my problem now. It's because my own API is not configured for CORS. And I just enabled it by adding this line:

<httpProtocol>  
      <customHeaders>  
        <add name="Access-Control-Allow-Origin" value="*" />  
      </customHeaders>  
</httpProtocol>

In my WCF RESTful web.config and under system.webserver. Reference: http://www.c-sharpcorner.com/UploadFile/dhananjaycoder/solved-access-control-allow-origin-error-in-wcf-rest-service/

Many thanks for you for saving my time :)