I am using react and use axios for making request to the airvisual API. However when I made the request in localhost it returned with a 404 status (I registered to Airvisual and got the key). I read Airvisual documentation and it mentioned using postman to make the request so I download postman and tried it out and the request is now success. I do not understand why it does not succeed in the first place and if I have to use postman for that API call, how do I connect it with my localhost.
Here's the code:
componentDidMount() {
axios
.get(
'api.airvisual.com/v2/countries?key=c441738e-dbc0-4f06-babc-bb126a29c19f'
)
.then((response) => console.log(response));
}
Related
I'm trying to send a delete and put request to my api through axios.
with post/get everything works well, and when I'm trying to send delete/put with postman, again, everything is fine, so the problem is with the react application.
axios instance:
const api = Axios.create({
baseURL: "http://localhost:8000",
timeout: 1000,
headers: {'Content-Type': 'application/json'}
});
request:
Axios.delete("/",{index:name})
.then((response)=>{console.log(response)})
.catch((err)=>{console.log(err)});
*put is the same, with another data
whenever I deploy these code i'm getting an 404 error in my console and the server doesn't get the requests.
You are not using the axios instance you created with the correct baseURL. Change your request to:
api
.delete("/",{index:name})
.then((response)=>{console.log(response)})
.catch((err)=>{console.log(err)});
I've trying to make a fetch request from my React app to my backend Flask server that will user a token id saved in cookies.
I previously set the cookie and it shows in browser but when I try to make the request it shows that comes back with error saying it returned none
Front-end
fetch(url, {
credentials: 'include'
}).then((response) => ...
Back-end
#app.route('/cookie', methods=['POST', 'GET'])
def api_get_cookie():
print(request.cookies) // print empty dictionary
return request.cookies.get('token')
I'm creating a React Application, and it is hosted on localhost:3000. I want to fetch data from a .NET Core Application hosted on localhost:5001. I'm using axios library to make http requests.
The function in which I make the request is:
async componentDidMount() {
const data = await axios.get("http://localhost:5001/api/gateways");
console.log(data);
}
The obtained Error is "Unhandled Rejection (Error): Network Error".
I tried to test the API with Postman and it works, as well as accessing it from the browser and it works too.
At the same time I tried to consume data from another API, this time hosted on an online server, and it worked perfectly, that means, the problem must be between two applications hosted on the localhost.
I fixed this issue by adding an Access-Control-Allow-Credentials header to HTTP responses in .NET CORE application. This header tells the browser that the server allows credentials for a cross-origin request.
Its necessary modify Configure method at Startup.cs fileadding the following code:
app.Use(async (context, next) =>
{
context.Response.Headers.Add("Access-Control-Allow-Origin", "*");
await next.Invoke();
});
And, it is also necessary modify ConfigureServices method with:
services.AddCors(c =>
{
c.AddDefaultPolicy(options => options.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod());
});
I am calling a Django back-end api from React front-end using axios.
For that api which is login api, I am using Django Knox package in logic.
React.js - I am calling axios.request(method, url, data) and the api call is working correctly.
When I went to Developer tools>Network, I can see Referer header set to React.js website in request header and no other csrf-related header. In Response headers I can see two set-cookie headers, csrftoken and sessionid.
React Native - same way I am calling api but api returns error csrf failed referer checking failed - no referer . When I checked response.config, Referer header is not set unlike React.js
Curl - works fine
httpie - works fine
How can I get rid of this error.
Note 1 - My Django back-end is based on api token logic and not csrf in any way.
Note 2 - React.js and Django are hosted on different domains. I am facing error in React Native which is in debug mode.
Update 1 - After disabling CSRF middleware in Django settings.py, now I am getting only one setCookie header (csrftoken is no longer obtained) but same error still persists.
Django Rest api need a Referer header.
In case of React.js it is automatically set (maybe by browser) and its value is current website.
But in case of React Native, it is not set. so we have to manually set it.
From this link, i set Referer header in axios. see below code
export const axiosAPICall = (method,url,data,headers) => {
let request = {
method: method,
url: url,
};
if (data) {
request['data'] = data;
}
if (headers) {
request['headers'] = headers;
}
// Referer is auto-set in react.js as same website value.
// for react-native we have to set it manually to target api:port
request['headers'] = {
...request['headers'],
Referer: url
}
return axios.request(request)
.then(res => res.data)
.catch(error => {throw error});
};
In Django settings.py, I commented CSRF middleware
In Django settings.py, I added only TokenAuthentication class to remove SessionAuthentication.
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': [
'rest_framework.authentication.TokenAuthentication',
]
}
Note - Please do steps 2 and 3 at your risk after knowing your requirements properly. I removed CSRF middleware because my API was completely dependent on token for auth. I did not need CSRF in any way.
Can anyone help, as I couldn't recreate this issue to check why this is happening.
I was using axios for calling rest api in my react application, I couldn't find any issue while developing and in uat , but when the code went live , in production always axios one post call is getting 502 proxy error but the same request was made to rest service and in backend everything is success. So , backend is success but user is seeing unsuccess page as it is getting 502 error.
Everything network and load balancers couldn't find any issue.
Example Code
this.postapi().then(function (response) {
//doing something
});
postapi() {
return axios.post('/postapi', {
// request data
}
}).catch(function (error) {
console.error(error);
if(error.response.status === 500 ){
//error page redirect
}else{
//unsuccess page redirect
}
});
}
from above code, always the API call is being done and success in rest service, but getting 502 proxy error and going to catch block and showing unsuccess page
This behavior is only happening in production
Environment:
Axios Version [e.g. 0.19.0]
Browser [e.g. Chrome, Safari]
React 16.9.0