Javascript 获取对波特api的请求-返回字符列表-反应

我试图在我的React组件中向Harry Potter api发出一个获取请求，以便检索字符列表，然后在页面上映射出它们的属性

但是，我收到以下错误：

    Access to fetch at 'https://www.potterapi.com/v1/characters' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

我是否需要在提取请求中指定“mode:no cors”？另外，应用程序给了我一个api密钥，但我不确定我是否以正确的方式使用它？（见下面的代码）

任何建议都将不胜感激

谢谢

罗伯特

      componentDidMount(){
        fetch("https://www.potterapi.com/v1/characters", {
          "headers": {        
            "x-rapidapi-key": "******************"
          }
        })
          .then(response => response.json())
          .then(posts => {
            this.setState({ posts: posts });
          })
          .catch(error => console.error(error));
      }
    
    
      /* 
        1. Add the method componentDidMount()
        2. Call fetch("https://www.potterapi.com/v1/characters")
        3. Then call .json() on the response
        4. Take that and set it as the value of posts in state
        5  Add a catch to log out any errors
      */
      render() {
        console.log(this.state.posts);
        return (
          <header>
            <h1>Posts</h1>
            <ul>
              {this.state.posts.map(post => (
                <li key={post.key}>{post.house}</li>
              ))}
            </ul>
          </header>
        );
      }
    }

componentDidMount（）{
取回（“https://www.potterapi.com/v1/characters", {
“标题”：{
“x-rapidapi-key”：“********************”
}
})
.then（response=>response.json（））
。然后（posts=>{
this.setState（{posts:posts}）；
})
.catch（error=>console.error（error））；
}
/* 
1.添加方法componentDidMount（）
2.调用获取（“https://www.potterapi.com/v1/characters")
3.然后对响应调用.json（）
4.将其设置为状态中posts的值
5添加捕获以注销任何错误
*/
render（）{
log（this.state.posts）；
返回(
帖子

{this.state.posts.map（post=>(
{post.house}
))}

);
}
}

从

邮递员那里获得帮助

查找正确的api？@A.R.SEIF或使用

curl-ihttps://www.potterapi.com/v1/characters -H'x-rapidapi-key:xxxx'

@Robert Young根据文档，您能检查

访问控制允许原点是否为
*
，您可以提供包含API密钥的查询参数
key
，因此，更像是
/v1/characters？key=xxx
从
邮递员那里获得帮助，查找正确的api？@A.R.SEIF，或者使用
curl-ihttps://www.potterapi.com/v1/characters -H'x-rapidapi-key:xxxx'
@Robert Young根据文档，您能检查
访问控制允许原点是否为
*
，您可以提供一个查询参数
key
，它包含您的API密钥，因此更像
/v1/characters？key=xxx