I've been banging my head trying to figure this out. I'm trying to call Yelp's API using axios, but I'm getting the following errors.
OPTIONS https://api.yelp.com/v3/businesses/search 403
Failed to load https://api.yelp.com/v3/businesses/search: Response for
preflight does not have HTTP ok status.
I took care of the CORS issue by turning CORS off with a chrome extension. I've tested the API request successfully with Postman, so there isn't any issues with the Bearer token I'm using or the URL.
Below is the code I'm using to call the API.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';
const config = {
headers: {'Authorization': 'Bearer token'},
};
class Results extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentWillMount() {
axios.get('https://api.yelp.com/v3/businesses/search', config)
.then(response => console.log(response));
}
Related
I'm a react native beginner. I'm trying to make a simple http get request using axios.
Here is my axios configuration:
import axios from 'axios';
export default axios.create({
baseUrl: 'https://blobrfishwebapi.azurewebsites.net',
});
And this is how I make the request using my configured axios:
import configuredAxios '../api/configuredAxios';
const response = await configuredAxios
.get('/employer/jobposts/recenttest')
.then(res => res.data)
.then(({data, isSuccessful, message}) => {
if (!isSuccessful) {
throw new Error(message);
}
setjobPostings(data);
})
.catch(err => {
console.log(JSON.stringify(err, Object.getOwnPropertyNames(err)));
});
This is the error I get when I make the above call:
{"stack":"Error: **Network Error**\n at createError (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.blobfshemployer&modulesOnly=false&runModule=true:98386:17)\n at XMLHttpRequest.handleError (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.blobfshemployer&modulesOnly=false&runModule=true:98196:69)\n.....
Finally, same endpoint call using fetch() which returns a 200 status code:
let response = await fetch(
'https://blobrfishwebapi.azurewebsites.net/employer/jobposts/recenttest',
);
let json = await response.json();
setjobPostings(JSON.stringify(json, Object.getOwnPropertyNames(json)));
catch(
err => console.log(JSON.stringify(err, Object.getOwnPropertyNames(err))),
console.log('error'),
);
Has anyone experienced a similar problem using axios?
I'm running my app on an android emulator, axios version is 0.21.4, react native version is 0.70.4.
Thanks in advance.
Rookie error! The "baseUrl" property of my axios config object should have the "url" part capitalized:
import axios from 'axios';
export default axios.create({
base**URL**: 'https://blobrfishwebapi.azurewebsites.net',
});
I'm trying to implement Auth0 into my React project using this tutorial: https://auth0.com/docs/quickstart/spa/react/02-calling-an-api.
Since I don't want to pass the access token on every page, I'm using a global file which I try to use on every Axios API call.
Code (api.js):
import axios from 'axios';
import { useAuth0 } from '#auth0/auth0-react';
const {getAccessTokenSilently} = useAuth0();
const token = await getAccessTokenSilently();
export default axios.create({
baseURL: `http://localhost:8080/`,
headers: {Authorization: `Bearer ${token}`},
timeout: 2000
});
I receive the following error:
Line 4:34: React Hook "useAuth0" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks
Example call in 'AssignmentSlice.js' (using Redux):
api.post(`assignment/add`, initialAssignment)
.then(res => {
console.log(res.data);
return res.data;
}).catch(err => {
console.log(err.response);
return err.response;
})
What would be the best way/pattern to implement the Auth0 access token?
This mean you need to call useAuth0 from react component to get token. Then passing token to API layer and call API as normal
See example here: https://auth0.github.io/auth0-react/
I am trying to send axios GET request from React to backend hosted on localhost (.Net 6.0).
Without authorization header I have response with my data, but when I try to attach autorization header I got error: net::ERR_HTTP2_PROTOCOL_ERROR 200
let responseData: MyType[] = await axiosInstance
.get("*endpoint*", {
headers: {
Authorization: `Bearer *BEARER*`,
},
})
It works the same with every request I am trying to send from my app.
axios Instance file looks like this:
import axios, { AxiosError } from "axios";
const axiosInstance = axios.create({
baseURL: "https://localhost:42310/",
});
export default axiosInstance;
I've managed to check more details about this error and in HTTP2 session I have following error:
I am using Google Chrome to run my app, but error occurs also in Edge.
In Postman everything works fine (with and without authorization header).
Do you have any idea what could cause described problem?
Hey great people of StackOverflow,
I'm creating a React app that uses the Google API, and I'm getting a 403 error when I use the search tool I've built, here's the following code:
import axios from 'axios';
const KEY = 'API KEY';
export default axios.create({
baseURL: 'http://www.googleapis.com/youtube/v3',
params: {
part: 'snippet',
maxResults: 5,
key: KEY
}
});
That's the API component to my React project, in my App.js, the callbacks look like this:
import React from 'react';
import SearchBar from './SearchBar';
import youtube from '../apis/youtube';
class App extends React.Component {
onTermSubmit = (term) => {
youtube.get('/search', {
params: {
q: term
}
});
};
I thought it might have been one of the EventHandlers not going through with "submit" but that wasn't the case as I was able to look at the Dev Console and I isolated XHR requests in the Network, and this is what I got:
Request URL: http://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=5&key=MYAPIKEY
Request Method: GET
Status Code: 403 Forbidden
Any help would be greatly appreciated, thank you folks in advance.
friend!)
Yes, you're absolutely right — "submit" EventHandlers are okay as well as your app logic!
But for search-request we shouldn't use API KEY because everyone (even unauthorized user) can just search something in Google, cannot he? :)
So, in this term, you should remove the key property in your request:
import axios from 'axios';
const KEY = 'API KEY';
export default axios.create({
baseURL: 'http://www.googleapis.com/youtube/v3',
params: {
part: 'snippet',
maxResults: 5
}
});
That's all, my friend!) Good luck to you!
I'm trying to connect my Django backend to a React Frontend using axios to access the api endpoint. I have tested the api using curl to see if I receive a json of the test data, it is fine. I have opened up the endpoint so that it does not need authentication. But I keep on getting this error in my javascript console:
edit: for to say that I am running the api and frontend on my computer
Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:87)
Test.js- Test component to test out feeding backend to frontend. I would like to console log the data but only catch the error.
import React, {Component} from 'react'
import axios from 'axios';
class Test extends Component{
constructor(){
super();
this.state = {
messages:[],
}
}
componentDidMount(){
axios.get('http://127.0.0.1:8000/api/message/?format=json')
.then(res=> {
console.log(res);
})
.catch(error =>{
console.log(error);
});
}
render(){
return(
<div>
<h1>
Message:
</h1>
</div>
)
}
}
export default Test;
I needed to setup CORS on my django api. The issue was not with my front end but by backend not being setup properly. Whenever you have api request from a different server you have to setup CORS on the backend.