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

Question

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

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

第一个是我的API，第二个是其他的。我已经在 Postman 以及其他编程语言和其他框架(如 ASP.NET MVC)中尝试过该 API，但它不再遇到麻烦了。但是当我尝试将 react.js 与 axios、fetch，甚至是 ajax 一起使用时，该 API 将无法正常工作。有没有人可以向我解释为什么？因为如果你用这个 https://api.myjson.com/bins/1cfkej或者这个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/

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