错误：状态代码403的请求失败 - 与Axios的问题，可能的交换以获取

发布于 2025-01-23 20:56:08 字数 1278 浏览 3 评论 0原文

我正在使用youtube API的应用程序中使用Axios，并且发生以下错误发生

以下是代码，

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更改为获取。问题是，我不知道如何从Axios变为获取。

原文

I'm using axios in an application Nextjs where I use the Youtube API and the following error occurred

Below is the code

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;

The other

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,
},

});

I would like a tip on how to solve this and if the best solution would be to change from Axios to fetch. Problem is, I don't know how to change from Axios to fetch.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一张白纸 2025-01-30 20:56:08

我认为这与包装无关。因为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();
};

这是来自 docs

如果在测试样本时遇到401或403错误，则收到

401或403的错误，这很可能是由于以下一个问题引起的：

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

I dont think that is related to package. Because 403 is forbidden response status code which indicates that the server understands the request but refuses to authorize it. Most likely you pass the wrong api key. If you need to fetch the data with fetch, you can write a reusable function:

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

this is from docs

Received a 401 or 403 error

If you're getting a 401 or 403 error when testing a sample, it's likely due to a problem with one of the following:

The API isn't enabled for your project. Review instructions for your API on how to create a project and enable an API.
You're using the wrong authorization type (API key instead of OAuth 2.0).
You're using OAuth 2.0, but with too narrow a scope.
When you set up your API key, you set up restrictions to prevent unauthorized use of your credentials. However, the request isn't meeting those restrictions.

回复收藏 0 原文

猫七 2025-01-30 20:56:08

降级到Axios 0.26.0

您可能会自动使用最后版本。

有关的：
https://github.com/axios/axios/axios/assues/issues/4638

回复收藏 0 原文

鹿! 2025-01-30 20:56:08

我在Next.js 13 vs Django Rest框架中遇到了类似的问题，我花了一个星期才发现（就我而言）的问题来自Axios。在获取并将文件上传到AWS S3存储桶时，我遇到了403个禁止错误。我花了将近五天的时间来解决我的获取和发布请求，而不是axios。这是出乎意料的，我无法解释原因。我怀疑Axios设置了错误的默认身份验证标头，即使使用标志：withCredentials：false。这仅在生产中发生而不是在开发中发生。

回复收藏 0 原文

~没有更多了~