Cannot make a GET request in Postman with React - reactjs

I created a joke generator app that takes jokes from a local json file with data that I created and displays it in the browser. This app has no backend at all. I am trying to make a GET request through Postman, but no luck. Is it even possible to use postman in this scenario?

NO Postman is not used for programmatic api calls. Use axios for this. Suppose your server is running on localhost:3000.
npm install axios
In your component,
const axios = require('axios');
// Make a request for a user with a given ID
axios.get('/jokes?id=1')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});

Related

React - Getting 401 authorization and CORs preflight error when trying to access a Kubernetes API endpoint using Axios

My React host has an IP of 10.60.160.61.
The API endpoint that I'm trying to reach has an IP of 10.200.50.21.
My App.js:
useEffect(() => {
const fecthPods = async () => {
try {
const response = await axios.get(`https://kubernetes.endpoint.com/k8s/clusters/name/v1/pods/myproject`,{ headers: { 'Authorization': 'Bearer token-myToken' } })
console.log(response.data)
} catch (err) {
if (err.response) {
// Not in the 200 response range
console.log(err.response.data)
console.log(err.response.status)
console.log(err.response.headers)
} else {
console.log(`Error: ${err.message}`)
}
}
}
fecthPods()
},[])
I get two errors in the network tab of developer tools:
401
CORS preflight
I can access an external API endpoint with no issue (ie. https://pokeapi.co/api/v2/pokemon/ditto).
I can successfully run a curl command to the Kubernetes API endpoint by passing the Auth token in the headers parameter, but just not working with Axios.
I don't think I need to run a backend express server since the API endpoint that I'm trying to reach is not on my localhost.
Not sure what else to try.
I believe I have found the answer to this question. Seems like I will need to run my API calls through a custom proxy as mentioned in this post.

Axios returns NetworkError / CORS Headers enabled

I build a ionic-react android application with Axios to get a server response. Two weeks ago my code was working fine. Now the axios request always returns a NETWORK_ERR (HttpError or Axios Error).
I tried to use all CORS Headers possible in my api, but the request is not sent to the webservice.
I hope anyone can help me:
This is the Code I was using:
const api = axios.create({
baseURL: "http://192.168.0.145:8080/RestFulTest-1.0-SNAPSHOT/api",
});
function callApi(){
api.get("/verification")
.then((res) => {
console.log(res);
})
.catch((error) => {
console.log(error);
});
}
Just directly opening the API Url in browser is not loading it...
Sot it seems either the backend is down or blocking and requires an authorization header with the axios request, like
let tokenStr = "Your TOKEN";
axios.get("/verification", { headers: {"Authorization" : `Bearer ${tokenStr}`} });
Hope it helps..

How to ignore SSL issues in axios using React Native?

Hi I'm currently working with react native on Android with Expo. I am trying to send requests to my server which has a valid ssl certificate, but for some reason axios takes it as invalid, so axios does not allow me to send requests to my server's api.
this is the error i get:
Error: Network Error
So I wonder if there is any way to make axios ignore the problem with the ssl and can send the requests in a normal way
this is my code:
try {
const headers = {
'Accept-Language': 'es-ES,es;q=0.8',
"Content-Type": "application/x-www-form-urlencoded",
"Accept": "application/json",
};
axios.get("https://URLtoMySERVER", {}, headers)
.then(response => {
console.log(response)
const posts = response.data;
console.log(posts)}
).catch(function(error) {
console.log("error", error);
});
} catch (error) {
console.log('err', error);
}
some points that I want to clarify:
1- I can't use RNFetchBlob because I'm using Expo, and RNFetchBlob have some native libraries.
2- I can't use httpsAgent either with axios because apparently https library does not work with expo, or at least it does not work for me.
3- fetch doesn't work either
Is there any other alternative to axios or fetch that works in react native with expo and where you can ignore the problems of https?

Get csrftoken cookie with React

I am making my first app with React, interacting with a Django Rest Framework back-end application. They both are running in their local servers.
I found that requests from the React front-end (that are sent with Axios) requiere a csrftoken cookie. I read and followed Django Documentation about it, but I always get an undefined csrftoken cookie.
This is the code of the request:
handleClick() {
var csrftokenCookie = Cookies.get('csrftoken');
console.log(csrftokenCookie);
const axios = require('axios');
axios.post('http://127.0.0.1:8000/es/api-auth/login/', {
next: '/',
username: 'some_name',
password: 'secret'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
}
I print to console the result of the Cookies.get('csrftoken'), and I can see that it is always undefined.
I don't know what I am missing in order to be able to get the csrftoken cookie.

how to Make Http request from reactjs ?

I am using react js as front end and zf3 as a backend in my ToDo application. I put all my React folder and files in public folder of Zend project. As of now, it is just Simple app there is no database connection. Now I want to add Db for storing tasks. but as a newbie, I don't know how to make Http request for edit delete and add a task. please explain with a example. Any help will be appreciated. Thank you.
I use axios. It allows you to set some default configuration so that you don't need to do it with every request:
axios.defaults.headers.common.Authorization = "my-awesome-token";
axios.defaults.baseURL = http://www.somehost.com/api;
...
axios.get('/people')
.then(response => handleResponse(response))
.catch(error => handleError(error))
// actually shoots to http://www.somehost.com/api/people with Authorization header
There are many npm modules for http request. Here is a smiple one: https://github.com/request/request
install axios
$ npm install axios
import axios
import axios from 'axios';
get request
axios.get('api url').then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
post request
var body = {
firstName: 'testName',
lastName: 'testLastName'
};
axios.post('api url',body).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});

Resources