Sou nova no ReactJS e estou aprendendo sobre API. Estou tentando utilizar uma API do Star Wars, mas não está me dando retorno. Já utilizei outras e deram certo.
Este é meu arquivo App.js:
import React, { Component } from 'react';
import api from './api';
class App extends Component {
state = {
filmes: [],
}
async componentDidMount() {
const response = await api.get('films');
this.setState({ filmes: response.data });
console.log(this.state.filmes);
}
render() {
const { filmes } = this.state;
return (
<div>
<h1>Listar os Filmes</h1>
{filmes.map((filme) => (
<div class="card">
<div class="card-body">
<h2 class="card-title">{filme.results.title}</h2>
<h3 class="card-episode">{filme.results.director}</h3>
<h4 class="card-date">{filme.results.release_date}</h4>
</div>
</div>
))}
</div>
);
};
};
export default App;
E este é meu arquivo api.js
import axios from 'axios';
const api = axios.create({
baseURL: 'https://swapi.dev/api/'
});
export default api;
Este é o link da api: https://swapi.dev/api/films/
O erro que recebo é:
Access to XMLHttpRequest at 'https://swapi.dev/api/films' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED
Uncaught (in promise) Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:83)
Unchecked runtime.lastError: The message port closed before a response was received.
DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
No Firefox:
Não sei o que fazer e como fazer para corrigir isso.
no-cors