Я пытаюсь запустить REST API и отобразить данные в таблице реакций.
Ниже приведен мой код:
import React, { Component } from "react";
import "react-table/react-table.css";
import ReactTable from "react-table";
class App extends Component {
constructor() {
super();
this.state = { data: [] };
}
async componentDidMount() {
const url = "some_url";
const username = "name";
const password = "password";
const credentials = `${username}:${password}`;
const base64EncodedCredentials = btoa(credentials);
let headers = new Headers();
headers.append("Content-Type", "application/json");
headers.append("Accept", "application/json");
headers.append("Access-Control-Allow-Credentials", true);
headers.append("Access-Control-Allow-Origin", true);
headers.append("Authorization", "Basic " + base64EncodedCredentials);
headers.append("Origin", "http://localhost:3000");
try {
const response = await fetch(url, {
mode: "no-cors",
credentials: "include",
method: "GET",
headers: headers
});
if (!response.ok) {
throw Error(response.statusText);
}
const json = await response.json();
console.log(json);
this.setState({ data: json });
} catch (error) {
console.log(error);
}
}
render() {
const data = this.state.data;
console.log(this.state.data);
const columns = [
{
Header: "Name",
accessor: "incidentId"
},
{
Header: "Rank",
accessor: "description"
}
];
return (
<div className="App">
<ReactTable
data={data}
columns={columns}
defaultPageSize={20}
pageSizeOptions={[5, 10, 20, 25, 50, 100]}
showPagination={true}
showPaginationTop={false}
showPaginationBottom={true}
showPageSizeOptions={true}
sortable={true}
multiSort={true}
resizable={true}
filterable={true}
/>
</div>
);
}
}
export default App;
Я добавил заголовки, режим: нет-cors и т. д. для устранения ошибок CORS / CORB.
Я вижу ответ в safari (элемент inspect) на вкладке Ресурсы.
Когда я пытаюсьраспечатайте ответ в консоли, как показано в коде: я получаю сообщение об ошибке вроде:
Error
_callee$
tryCatch
invoke
asyncGeneratorStep
_next
promiseReactionJob
Как мне решить эту проблему?
Я попытался запустить случайный API в Интернете - // const url = "https://api.coinmarketcap.com/v1/ticker/";
он работает нормально и показывает данные в консоли (но я должен удалить все заголовки и cors вещь из кода). Но для моего REST API я долженвнести эти изменения, и он работает, как я вижу ответ на вкладке "Ресурсы", но я не понимаю вышеупомянутую ошибку и как ее устранить? Пожалуйста, помогите.