Reactjs 反应获取谷歌API

当我获取这个google API时，它会在控制台日志中给我这个错误消息，我做错了什么

加载资源失败：服务器响应状态为404（） localhost/：1无法加载获取API。请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“”。响应的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;

code~
从“React”导入React，{Component}；
从“react bootstrap”导入{FormGroup、FormControl、InputGroup、Glyphicon}；
类全局扩展组件{
建造师（道具）{
超级（道具）；
此.state={
查询：“”
}
}
搜索（）{
常数基函数https://googleapis.com/books/v1/volumes?q='
fetch（${BASE\u URL}${this.state.query}，{
方法：“GET”，
“访问控制允许来源”：“*”，
“内容类型”：“应用程序/json”，
})
.then（response=>response.json（））
.then（json=>console.log（json））；
}
render（）{
返回(
图书探险家！
this.setState（{query:event.target.value}）
onKeyPress={event=>{
如果（event.key=='Enter'）{
这是search（）；
}
}}
/>
this.search（）}>
)
}
}
导出默认全局；

编辑版本：

这是一个CORS的问题，因此您可以考虑在<代码>获取代码>代码>中设置更多的标题值：

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));
}

=================

您忘记了将

search（）

函数绑定到组件中，因此只需将其添加到构造函数中即可：

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

或：将

搜索（）修改为自动绑定：

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

之后，
${BASE\u URL}${this.state.query}
将返回正确的值
，因此我添加了this.search=this.search.bind（this）；进入与你摆出的姿势相同的常数，但我仍然得到这个信息。加载资源失败：服务器以404（未找到）2bundle.js:37487 GET 404（）的状态响应。API url如何，它会自动返回404:I尝试但未找到！！嘿，这是我在搜索栏里的原始帖子。所以更好的理解是，我正在构建一个基于GoogleBooksAPI的应用程序。当您在搜索栏中输入图书名称时，它将从google API返回一些字符串或值。哈利波特说404找不到的唯一原因是我不确定我的const url，或者我有什么不正确的地方，或者我做错了什么。我刚刚为上面的CORS添加了一个修复程序，你介意再试一次吗，谢谢上面的内容，但我仍然收到同样的消息，我想这可能与我从本地主机3000获得的许可有关。我真的不知道。尽管如此，我还是非常感谢你的帮助。