Estoy tratando de usar fetch en React Native para obtener información de la API Product Hunt. Obtuve el token de acceso adecuado y lo guardé en el estado, pero parece que no puedo pasarlo dentro del encabezado de autorización para una solicitud GET.
Esto es lo que tengo hasta ahora:
var Products = React.createClass({ getInitialState: function() { return { clientToken: false, loaded: false } }, componentWillMount: function () { fetch(api.token.link, api.token.object) .then((response) => response.json()) .then((responseData) => { console.log(responseData); this.setState({ clientToken: responseData.access_token, }); }) .then(() => { this.getPosts(); }) .done(); }, getPosts: function() { var obj = { link: 'https://api.producthunt.com/v1/posts', object: { method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + this.state.clientToken, 'Host': 'api.producthunt.com' } } } fetch(api.posts.link, obj) .then((response) => response.json()) .then((responseData) => { console.log(responseData); }) .done(); },La expectativa que tengo para mi código es la siguiente:
fetch un token de acceso con datos de mi módulo API importadoclientToken de this.state para que sea igual al token de acceso recibido.getPosts , que debería devolver una respuesta que contenga una serie de publicaciones actuales de Product Hunt. Puedo verificar que se recibe el token de acceso y que this.state lo recibe como su propiedad clientToken . También puedo verificar que se está ejecutando getPosts .
El error que estoy recibiendo es el siguiente:
{"error":"unauthorized_oauth", "error_description":"Proporcione un token de acceso válido. Consulte nuestra documentación de API sobre cómo autorizar una solicitud de API. Asegúrese también de que necesita los ámbitos correctos. Por ejemplo, \"private public\ " para acceder a puntos finales privados."}
He estado trabajando asumiendo que de alguna manera no estoy pasando el token de acceso correctamente en mi encabezado de autorización, pero parece que no puedo entender exactamente por qué.
Ejemplo de recuperación con encabezado de autorización:
fetch('URL_GOES_HERE', { method: 'post', headers: new Headers({ 'Authorization': 'Basic '+btoa('username:password'), 'Content-Type': 'application/x-www-form-urlencoded' }), body: 'A=1&B=2' });Resulta que estaba usando el método de fetch incorrectamente.
fetch espera dos parámetros: un punto final para la API y un objeto opcional que puede contener cuerpo y encabezados.
Estaba envolviendo el objeto deseado dentro de un segundo objeto, lo que no me dio ningún resultado deseado.
Así es como se ve en un nivel alto:
fetch('API_ENDPOINT', OBJECT) .then(function(res) { return res.json(); }) .then(function(resJson) { return resJson; })Estructuré mi objeto como tal:
var obj = { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Origin': '', 'Host': 'api.producthunt.com' }, body: JSON.stringify({ 'client_id': '(API KEY)', 'client_secret': '(API SECRET)', 'grant_type': 'client_credentials' }) }Tuve este problema idéntico, estaba usando django-rest-knox para tokens de autenticación. Resultó que no había ningún problema con mi método de búsqueda, que se veía así:
... let headers = {"Content-Type": "application/json"}; if (token) { headers["Authorization"] = `Token ${token}`; } return fetch("/api/instruments/", {headers,}) .then(res => { ...Estaba ejecutando apache.
Lo que resolvió este problema para mí fue cambiar WSGIPassAuthorization a 'On' en wsgi.conf .
Tenía una aplicación Django implementada en AWS EC2 y usé Elastic Beanstalk para administrar mi aplicación, así que en django.config hice lo siguiente:
container_commands: 01wsgipass: command: 'echo "WSGIPassAuthorization On" >> ../wsgi.conf'