如何在React Axios请求中添加带有值为API键的标题字段

Question

要访问我的API，我需要添加一个标题字段：X-API-KEY在Axios中获取以API键的值：12345678。 我该如何与当前代码做出反应？

import "./App.css";
import axios from "axios";
import { useEffect } from "react";

function App() {
  useEffect(() => {
    axios
      .get("https://challenge.movies.com.au/api/v2/blahblah/movies")
      .then((res) => console.log(res.data))
      .catch((err) => console.log(err));
  }, []);

  return <div className="App"></div>;
}

export default App;

Answer 1

尝试一下。

    const AuthStr = 'Bearer '.concat(USER_TOKEN); 
    axios.get(URL, { headers: { Authorization: AuthStr } })
     .then(response => {
         // If request is good...
         console.log(response.data);
      })
     .catch((error) => {
         console.log('error ' + error);
      });

Answer 2

这是Axios上的标头的用途：

 useEffect(() => {
            axios.get("https://challenge.movies.com.au/api/v2/blahblah/movies", {
        headers:{
        'x-api-key': 'Bearer 12345678')
              }
              .then((res) => console.log(res.data))
              .catch((err) => console.log(err));
          }, []);

Answer 3

您可以像这样通过

    axios
          .post(
            "url",
            {
              key : value
            },
            {
              headers: {
                Authorization: "Bearer " + JSON.parse(token),
              },
            }
          )
  .then(async (response) => {
       //Handel response here
      })
      .catch((error) => {
        console.log(error);
      });