55633


お疲れ様です。  
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>)
[code]

     _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));
      }
    
[/code]

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

[code]

    [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)
    
[/code]

自分が利用する環境は

[code]

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

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

[code]

    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;
    
[/code]

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

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

APIの情報です。

> <https://yts.lt/api>

よろしくお願いします。


CC BY-SA 4.0
2019-06-08T07:45:50.660
55630
2019-06-08T10:26:01.790
2019-06-08T08:01:54.693
34612
34612
question
javascript reactjs
Javascript(React)でCorsエラーが発生していますが、解決方法を教えてもらいたいです。


ブラウザのURLからアクセスすると、ytm.am => ytm.lt
にリダイレクトしていますが、fetchだとリダイレクトの前にCORSエラーになって落ちています。

.lt宛にリクエストすると問題ないようですがどうでしょうか。

[code]

    _callApi = () => {
      return fetch('https://yts.lt/api/v2/list_movies.json?sort_by=download_count')
        .then(res => res.json())
        .then(json => json.data.movies)
        .catch(err => console.log(err));
    }
    
[/code]


CC BY-SA 4.0
2019-06-08T09:21:12.413
55633
2019-06-08T10:26:01.790
2019-06-08T10:26:01.790
26558
26558
55630
answer