I want to fetch the data from this api (refer the screenshots) in reactjs using fetch function..I tried different ways but none of them is working
I am doing this way
useEffect(() => {
// POST request using fetch inside useEffect React hook
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ "firebase_id":"fonnnnjnvQXzyOcXK5kW88PM8jnjnhnhb1"})
};
fetch('demo.revon.com/audi/zero/li', requestOptions)
.then(response => response.json())
.then(data => console.log(data));
You should try to call your API without https://localhost:3000 in front of your API link.
You forgot to put HTTP or HTTPS so it consider a subfolder of localhost:3000.
You must do something like that : (or http if not https)
fetch('https://demo.revon.com/audi/zero/li', requestOptions)
.then(response => response.json())
.then(data => console.log(data));
Regards
You’ll need to mention https:// in the fetch url
requestOptions is not the issue here!
You are OBVIOUSLY hitting the localhost domain, not demo.revon.
Insert the full URL: https://demo.revon.com/audi/zero/li
Related
I'm trying to extract the Workable api and display all the jobs listings into an external site.
The api documentation is here: https://workable.readme.io/reference/generate-an-access-token.
It says on the notes here:
Workable does not support Cross-Origin Resource Sharing (CORS)`
And when I try to fetch it says Access-Control-Allow-Origin header is present on the requested resource. How do I enable it? Because the Integrations settings under workable only allows me to only generate access token.
This is a sample code here when you go to this jobs documentation:
Note: I'm only using JavaScript
const options = {
method: 'GET',
headers: {accept: 'application/json', Authorization: 'Bearer AccessTokenHere'}
};
fetch('https://subdomain.workable.com/spi/v3/jobs?limit=50', options)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error(err));
Postman Screenshot of dot net core API
Postman fetches the data from my dot net core API but I cannot get the data in React native using the same API. I tried everything like changing port number etc.
React Native API Request
useEffect(() => {
const getData= async () => {
try {
const response = await axios.get('http://10.0.2.2:54669/DoctorMaster/Getalldoctorssearch/1062');
setAppointments(response.data);
setIsLoading(false);
console.log(response.data);
} catch (error) {
console.log(error);
}
}
getData()
}, [setAppointments, setIsLoading]);
Please follow the below structure
fetch(
"url"
{
method: "GET",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: "Bearer " + JSON.parse(token),
},
}
)
.then((response) => response.json())
.then((responseJson) => {
// Handle response here
})
.catch((error) => {
console.error(error);
});
Be aware that React Native refuses HTTP requests instead of HTTPS requests by default:
To handle HTTP requests in Android see this post
To handle HTTP requests in iOS see this post
You are trying to fetch data from localhost which your mobile device won´t be able to fetch the url. You need to publish your API on a Web Server, and then you will be able to fetch the data
Solution: All of the answers did not work for me, I used a visual studio extension called Conveyor by keyoti to solve the issue, this extension allow me to use the API outside of localhost, it will show you the remote URL, use that url to call API from your mobile application
What i try to do
I have a small ReactJS application. In this application, i try to do an REST request to the API of SpreadShirt via the JS Fetch API.
What fails
Basically i get no data. The console of the browser shows the following output:
Access to fetch at 'https://api.spreadshirt.net/api/v1/shops/100749149/sellables?mediaType=json' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
My Code
getData() {
const header = new Headers({
"Authorization": "SprdAuth apiKey=\"XXXXXXXXX"",
"User-Agent": "MukoSoft/1.0 (https://mydomain.de; my#mail.de)"
});
const options = {
method: 'GET',
headers: header
};
fetch('https://api.spreadshirt.net/api/v1/shops/100749149/sellables?mediaType=json', options)
.then(response => response.json())
.then(data => this.setState({ data: data }))
.then(() => this.setState({ loading: false }))
}
Does anyone has a hint for me, while i can't fetch via JavaScript? And can somebody explain, why the request via Postman works, but not via fetch API?
Since this is my first question on stack overflow, you can give me advices on how to formulate questions better
Stuck in unable to pass headers parameter in fetch call, I tried many different codes snippets by using Stackoverflow as well as Postman code too.
Currently here's the code Snippet for calling GET request by using Fetch method in reactjs
var myHeaders = new Headers();
myHeaders.append("mode", "no-cors");
myHeaders.append("Authorization", "Bearer oauth 2 token");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
fetch("api url", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
Hi everyone,
I'm calling simple calling GET api by using Fetch function, but request Header is unable to pass in the request. But the same request I'm calling from PostMan it's working.
Any idea where I'm doing wrong.
===
I've built a custom API with AWS API Gateway.
For one of the method, I've enable the authorization to be checked using a Lambda function.
In order to make it work, I have to add the following key: Key: authorizationToken Value: allow.
I've tested it using Postman and it's working fine, my POST is processed and I receive a response.
I'm just starting with Javascript so I've used the code provided in Postman.
Here it is:
function getData(event){
var myHeaders = new Headers();
myHeaders.set("authorizationToken", "allow");
var requestOptions = {
method: 'POST',
mode: 'no-cors'
};
fetch("https://[THE_URL_OF_MY_API]/prod/counter", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
And i'm getting the following error message in the console.
script.js:49 POST https://[THE_URL_OF_MY_API]/prod/counter
net::ERR_ABORTED 401 (Unauthorized)
getData # script.js:49
I've looked into the logs of the API Gateway in AWS in order to troubleshoot it:
But I can't see any logs so it seems my fetch is being block before
it's even being sent.
I checked the headers of the successful API call sent by Postman and I can't find any header apart from mine and the one generated by the application automatically.
What am I doing wrong ?
Note: I'm using similar code to another endpoint where the authorization is not enabled and it's working fine. SO I guess my header is not correctly set.
Thanks !
#CRice, Salmin Skenderovic, Jaromanda X : Thanks a lot for your feedback.
The missing myHeaders was a typo, I fixed it.
Seeing the comment about the 'no-cors', I've looked into it, enable CORS, authorized my specific header in Access-Control-Allow-Headers.
And now it's working fine.
My amended code:
var myHeaders = new Headers();
myHeaders.set("authorizationToken", "allow");
var requestOptions = {
method: 'POST',
redirect: 'follow',
headers : myHeaders
};
fetch("https://[URL_OF_MY_API_ENDPOINT]/prod/counter", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
Configuration of my API Gateway:
Configuration of my API Gateway