javascript - 从 API 绑定(bind)数据时 React JS 意外结束 JSON 输入错误

Question

我有一个选择下拉列表，它的数据是从 API/json 文件生成的。 json 类似于以下内容:

[
    {
        "id": 444,
        "ggg_progid": "0000-111-222-333-44444",
        "clientName": "client 1- aaa-bb-01-05 - AA"
    }
]

...但是当我使用 API/json 文件的特定 url 运行我的代码时，我收到错误，Unhandled Rejection (SyntaxError): Unexpected end of JSON input。因此，当我从 API 复制代码并将其粘贴到 myjson.com，然后使用 myjson.com 提供的 url 时，我的代码工作正常。

这可能是什么问题，这两个 API 具有相同的 json 语法？

为了以防万一，我提供了以下代码:

import React, { Component } from 'react';

class Ast extends Component {

   constructor(){
       super();
       this.state = {
           data: [],
       };
   } //end constructor

    componentDidMount() {
        fetch('http://myapi/:1234/api/clients', {
            method: 'GET',
            headers: {
                'Content-type': 'application/json',
                'Authorization': 'Bearer abc123def.abc123def.abc123def'
            },
        })
        .then(results => results.json())
        .then(data => this.setState({ data: data }))
    }

    render() {
    console.log(this.state.data);
    return (
    <div>
        <div className="container">
            <form>
            <h2>Memeber Selection:</h2>
            <div>
                {
                    this.state.data.map(item =>(
                        <div>
                            <select className="custom-select" id="clientName">>
                            <option key={item.clientName}>{item.clientName}</option>
                            </select>
                        </div>
                    ))
                }
            </div>
            <div>
            <button type="submit" className="btn btn-primary">Submit</button>
            </div>
            </form>
        </div> 
    </div>
        );
      }
}

export default Ast

我获取了失败的 URL 并将其粘贴到 postman 中，它呈现了结果。当我在我的代码中使用 url 时，为什么会产生错误？

Answer 1

您的 Auth header 错误

改变

'Authorization': 'abc123def.abc123def.abc123def'

到

'Authorization': 'Bearer abc123def.abc123def.abc123def'