React Fetch Google API

Question

これまでにこのGoogle APIをフェッチすると、コンソールログ内にこのエラーメッセージが表示されるのですが、何が間違っていますか？

リソースの読み込みに失敗しました：サーバは404（）のステータスで応答しました localhost /：1フェッチAPIにはhttps://googleapis.com/books/v1/volumes?q=harry%20potterをロードできません。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。 Origin 'http://localhost:3000'はアクセスできません。レスポンスにはHTTPステータスコード404があります。不必要なレスポンスが必要な場合は、リクエストのモードを 'no-cors'に設定して、CORSを無効にしてリソースをフェッチします。

Code~ 

    import React, { Component } from 'react'; 
import { FormGroup, FormControl, InputGroup, Glyphicon } from 'react-bootstrap'; 

class Global extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      query: '' 
     } 
    } 

search() { 
    const BASE_URL = 'https://googleapis.com/books/v1/volumes?q=' 
    fetch(`${BASE_URL}${this.state.query}`, { 
     method: 'GET', 
     'Access-Control-Allow-Origin': '*', 
     'Content-Type': 'application/json', 
    }) 
    .then(response => response.json()) 
    .then(json => console.log(json)); 
} 
render() { 
    return(
     <div className="Global"> 
      <h2> Book Explorer!</h2> 
      <FormGroup> 
       <InputGroup> 
        <FormControl 
         type="text" 
         placeholder="Search for a book" 
         onChange={event => this.setState({query: event.target.value})} 
         onKeyPress={event => { 
         if (event.key === 'Enter') { 
          this.search(); 
         } 
         }} 
         /> 
         <InputGroup.Addon onClick={() => this.search()}> 
         <Glyphicon glyph="search"></Glyphicon> 
         </InputGroup.Addon> 
         </InputGroup> 
         </FormGroup> 
        </div> 


) 
} 
} 



export default Global; 

Answer 1

編集されたバージョンは：

search() { 
    const BASE_URL = 'https://googleapis.com/books/v1/volumes?q=' 
    fetch(`${BASE_URL}${this.state.query}`, { 
     method: 'GET', 
     headers:{ 
     'Access-Control-Allow-Origin': '*', 
     'Access-Control-Allow-Credentials':true, 
     'Access-Control-Allow-Methods':'POST, GET' 
     } 
    }) 
    .then(response => response.json()) 
    .then(json => console.log(json)); 
} 

を=======：あなたはfetchに複数のヘッダのparamsを設定することを検討するよう

これは、CORSの問題です==========

search()関数をコンポーネントにバインドするのを忘れてしまったので、コンストラクタにそれを追加してください：

constructor(props) { 
    super(props); 
    this.state = { 
     query: '' 
    } 
    this.search = this.search.bind(this); 
} 

OR：自動拘束されることにsearch()の見直し：その後

search =() => { 
    // copy your whole logics here 
} 

、${BASE_URL}${this.state.query}は、だから私はthis.search = this.searchを追加し、正しい値