0
678
ViewsError: la solicitud falló con el código de estado 403 - Problema con Axios, posible intercambio por recuperación
Estoy usando axios en una aplicación Nextjs donde uso la API de Youtube y ocurrió el siguiente error 
A continuación se muestra el código
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;El otro
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, }, });Me gustaría un consejo sobre cómo resolver esto y si la mejor solución sería cambiar de Axios a buscar. El problema es que no sé cómo cambiar de Axios a fetch.
2 answers
Answer question0
No creo que esté relacionado con el paquete. Porque 403 es un código de estado de respuesta prohibido que indica que el servidor entiende la solicitud pero se niega a autorizarla. Lo más probable es que pase la clave de API incorrecta. Si necesita obtener los datos con fetch , puede escribir una función reutilizable:
// 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(); };esto es de documentos
Recibió un error 401 o 403
Si obtiene un error 401 o 403 al analizar una muestra, es probable que se deba a un problema con uno de los siguientes:
- La API no está habilitada para su proyecto. Revise las instrucciones para su API sobre cómo crear un proyecto y habilitar una API.
- Está utilizando el tipo de autorización incorrecto (clave de API en lugar de OAuth 2.0).
- Está utilizando OAuth 2.0, pero con un alcance demasiado limitado.
- Cuando configura su clave API, establece restricciones para evitar el uso no autorizado de sus credenciales. Sin embargo, la solicitud no cumple con esas restricciones.
0
Desactualización a AXIOS 0.26.0
Probablemente esté utilizando la última versión automáticamente.
Relacionado: https://github.com/axios/axios/issues/4638