2

嗨所以我正在努力解决的问题是我有一个带有访问密钥的 api，我不知道如何使用该 api 访问密钥设置组件内的标头，我在下面的示例中使用默认获取随机用户 api但我想知道我应该如何以及在哪里添加带有访问密钥的标题，在此先感谢。



import React from 'react';


export default class FetchRandomUser extends React.Component {



    async componentDidMount() {
        const url = "https://api.randomuser.me/"
        const response = await fetch(url)
        const data = await response.json();
        this.setState({ person: data.results[0], loading: false })
    }

    render() {
        return <div>
            {this.state.loading || !this.state.person ? (<div>Loading...</div>) : (<div>{this.state.person.name.first}</div>)}
        </div>
    }
}
4

3 回答 3

4 
fetch(url, {
  method: 'GET',
  headers: {
    authorization: youKEY,
    Accept: 'application/json',
  },
});
于 2020-02-23T06:48:42.107 回答
0

这就是您可以在 url 中传递 api 密钥的方式https://randomapi.com/api/qcol88t8?key=TCGJ-8B0M-33L6-UX5Q；`

代码

export default class FetchRandomUser extends React.Component {
  state = {
    loading: true,
    person: {}
  };

  async componentDidMount() {
    const url = `https://randomapi.com/api/qcol88t8?key=TCGJ-8B0M-33L6-UX5Q`;
    const response = await fetch(url);
    const data = await response.json();
    this.setState({ person: data.info, loading: false });
  }

  render() {
    return (
      <div>
        {this.state.loading || !this.state.person ? (
          <div>Loading...</div>
        ) : (
          <h2>{this.state.person.user.username}</h2>
        )}
      </div>
    );
  }
}
于 2020-02-23T07:13:02.913 回答
0

0

fetch(your_url,a_json_object) 在这里，json_object 有一个称为 headers 的元素，只需在其中使用您的自定义标头即可。但是大多数菜鸟忘记在后端添加标题。我展示了一个正确的例子：

前端：

fetch('fdf.api/getid',{ 
method:'post',
headers:{"a_custom_header":"custom_value"}
})

后端：

const express = require('express') 
const app = express()

app.use(function(req,res,next){ 
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, 
       PUT,PATCH, DELETE');

  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,a_custom_header'); //notice here carefully

  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
 })
于 2022-02-18T21:07:34.890 回答