Javascript(React)でCorsエラーが発生していますが、解決方法を教えてもらいたいです。

お疲れ様です。
Javascriptにてfetch文（非同期）を利用し、Jsonを取得しようとしていますが、

CORSエラーになりました。
以下のQnAを参照して、下記のコードにしているんですが、

(https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe)
(https://stackoverflow.com/questions/43262121/trying-to-use-fetch-and-pass-in-mode-no-cors)

 _callApi = () => {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
    headers.append('Access-Control-Allow-Credentials', 'true');
    headers.append("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, Authorization, Origin, Accept");
    headers.append('GET', 'POST', 'OPTIONS');
    return fetch('http://yts.am/api/v2/list_movies.json?sort_by=download_count',{
      //mode: 'no-cors',
      credentials: 'include',
      method: 'GET',
      headers: headers
    })
    .then(response => response.json())
    .then(json => {
      console.log(json.data.movies);
      return json.data.movies})
    .catch(err => console.log(err));
  }

こういうエラーになりまして、解決方法を教えてもらいたいです。

[Error] Preflight response is not successful
[Error] Fetch API cannot load http://yts.am/api/v2/list_movies.json?sort_by=download_count due to access control checks.
[Error] Failed to load resource: Preflight response is not successful (list_movies.json, line 0)

自分が利用する環境は

localhost:3000
Docker
ReactJS(全体的にはReactJSです)
Safari Browser（ver.12.1.1(14607.2.6.1.1)）

全体のソースコードです。

import React ,{Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Movie from './Movie.js'

class App extends Component{

  state = {}

  componentDidMount(){
   this._getMovies();
  }

  _getMovies = async () => {
    const movies = await this._callApi();
    this.setState({
      movies: movies
    });
  }

  _callApi = () => {

    let headers = new Headers();

    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
    headers.append('Access-Control-Allow-Credentials', 'true');
    headers.append("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, Authorization, Origin, Accept");
    headers.append('GET', 'POST', 'OPTIONS');

    return fetch('http://yts.am/api/v2/list_movies.json?sort_by=download_count',{
      //mode: 'no-cors',
      credentials: 'include',
      method: 'GET',
      headers: headers
    })
    .then(response => response.json())
    .then(json => {
      console.log(json.data.movies);
      return json.data.movies})
    .catch(err => console.log(err));
  }

  _renderMovies = () => {
    const movies = this.state.movies.map((movie) =>{
      console.log(movie);
      return <Movie 
        title={movie.title}
        poster={movie.medium_cover_image}
        genres={movie.genres}
        synopsis={movie.synopsis}
        key={movie.id}
      />
    });
    return movies;
  }
  render(){
    return (
      <div className="App">
        {this.state.movies ? this._renderMovies() : "loading"}
      </div>
    );
  }
}

export default App;

取得しようとしているURLは普通に動作できています。

http://yts.am/api/v2/list_movies.json?sort_by=download_count

APIの情報です。

https://yts.lt/api

よろしくお願いします。