错误：请求失败，状态代码为 403 - Axios 出现问题，可能需要交换 fetch

Question

我在应用程序 Nextjs 中使用 axios，其中使用 Youtube API 并发生以下错误

下面是代码

import React from "react";
import youtube from "./api";
import VideoList from "./VideoList";

class App extends React.Component {
  state = {
    videos: [],
  };
  componentDidMount() {
    this.onTermSubmit("Car");
  }

  onTermSubmit = async (term) => {
    const res = await youtube.get("/search", {
      params: {
        q: term,
      },
    });
    this.setState({ videos: res.data.items });
  };
  render() {
    return (
      <>
        <div>
            <div >
              <VideoList
                videos={this.state.videos}
                
              />
            </div>
        </div>
      </>
    );
  }
}

export default App;

其他

import axios from 'axios';

const KEY = "xxxxx";

export default axios.create({
  baseURL: "https://www.googleapis.com/youtube/v3",
  params: {
    part: "snippet",
    maxResults: 16,
    key: KEY,
},

});

我想知道如何解决这个问题，以及最好的解决方案是否是从 Axios 更改为 fetch。问题是，我不知道如何从 Axios 更改为 fetch。

Answer 1

我认为这与包装无关。因为403是禁止响应状态码，表示服务器理解该请求但拒绝授权。您很可能传递了错误的 api 密钥。如果您需要使用

fetch

获取数据，您可以编写一个可重用的函数：

// genre is like video type. for example Productivity
const videos = async (genre) => {
  const YOUTUBE_API_KEY = process.env.YOUTUBE_API_KEY;
  const BASE_URL = "youtube.googleapis.com/youtube/v3";

  const response = await fetch(
    `https://${BASE_URL}/${genre}&maxResults=25&key=${YOUTUBE_API_KEY}`
  );

  return await response.json();
};

这来自文档

收到 401 或 403 错误

如果您在测试示例时遇到 401 或 403 错误，可能是由于以下其中一项问题造成的：

• 您的项目未启用该 API。查看有关如何创建项目和启用 API 的 API 说明。
• 您使用了错误的授权类型（API 密钥而不是 OAuth 2.0）。
• 您正在使用 OAuth 2.0，但范围太窄。
• 当您设置 API 密钥时，您会设置限制以防止未经授权使用您的凭据。但是，该请求不符合这些限制。

Answer 2

降级到 AXIOS 0.26.0

可能您正在自动使用最新版本。

相关： https://github.com/axios/axios/issues/4638

Answer 3

我在 Next.js 13 vs Django Rest Framework 中遇到了类似的问题，我花了一周时间才发现问题（就我而言）来自 Axios。在获取文件并将其上传到 AWS S3 存储桶时，我收到 403 禁止错误。我花了将近五天的时间才解决，只使用 fetch 来处理我的 GET 和 POST 请求，而不是 Axios。但这是出乎意料的，我无法解释为什么。我怀疑 Axios 设置了错误的默认身份验证标头，即使带有标志：

withCredentials: false.

这只发生在生产中，而不是在开发中。