无法阅读我的 API 或特定的 API [React.js/Node.js/Axios/Fetch]

Question

我真的很困惑，如果你告诉我我的代码有误，我已经尝试了不同的 API 并且它有效。但是有几个API在我的react.js中无法访问。请帮助我并纠正。您可以尝试这些 API，它们在 react.js 中不起作用，但总是出现打字稿获取失败或网络错误：

第一个是我的API，第二个是其他的。我已经在 Postman 以及其他编程语言和其他框架（如 ASP.NET MVC）中尝试过 API，但它不再遇到麻烦了。但是当我用 axios 尝试 react.js 时，fetch，甚至 ajax 那 API 也不起作用。有没有人可以向我解释为什么？因为如果你使用这个 https://api.myjson.com/bins/1cfkej or this one http://jsonplaceholder.typicode.com/todos 就没有问题。

谢谢！！

这是我的代码

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

感谢 Dimitar Dimitrov 提供的线索。我现在解决我的问题。是因为我自己的API没有配置CORS。我只是通过添加这一行来启用它：

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

在我的 WCF RESTful web.config 和 system.webserver 下。参考：http://www.c-sharpcorner.com/UploadFile/dhananjaycoder/solved-access-control-allow-origin-error-in-wcf-rest-service/

非常感谢您节省了我的时间:)

无法阅读我的 API 或特定的 API [React.js/Node.js/Axios/Fetch]

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

javascript

node.js

reactjs

axios

wcf-rest