This question already has an answer here:
How to send the raw-data with GET request in jQuery ajax?
(1 answer)
Closed 1 year ago.
My Url Params are too big. So I'm trying to get that content with passing it in request.body. The API works fine with postman while testing. But not able to fetch it in React
I'm using ExpressJS
API: http://localhost:5000/api/v1
React Code:
let result = await fetch("http://localhost:8080/autocomplete",{
method: 'GET',
body: {
"text": "something new"
}
});
console.log(await result.json()) // Not get my data here
ERROR:
TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have a body.
How i solve this issue ?
It is expected.
From mozilla docs, it mentioned: The HTTP GET method requests a representation of the specified resource. Requests using GET should only be used to request data (they shouldn't include data).
https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET
Related
This question already has answers here:
Is there any reasons to use axios instead ES6 fetch [closed]
(3 answers)
Closed last month.
I am working on nextjs(reactjs framework) Right now i want to know the difference
betweeen "axios" and "await fetch" ? In which situation we should use "axios" ? For example here is my code
const response = await fetch(`/api/comments/${commentId}`, {
method: 'DELETE'
})
Different properties are used for a post request to send data to the endpoint - Axios uses the data property, whereas with fetch we use the body property. We need to serialize data into a JSON string to send data. Axios automatically stringifies data when sending JavaScript objects to the API using the POST method.
for more information you can check form this https://codilime.com/blog/axios-vs-fetch/#:~:text=Different%20properties%20are%20used%20for,API%20using%20the%20POST%20method.
This question already has answers here:
Sending Request body for GET method in AXIOS throws error
(3 answers)
Closed 2 years ago.
I want to send empty object in http get request body to work api on angular 10. Our api server need empty request body object in GET request.
I want like this
{
method: 'get',
url: 'http://domain.api.com/api/method?param1=value1',
body: {
key:value
}
}
Note: I dont want to use POST method for send request body.
You should use Post for a payload within a GET request message has no defined semantics; sending a payload body on a GET request might cause some existing implementations to reject the request.
You can read more detail here
I'm getting this 2 errors when using post request to an API
(Using chrome)
xhr.js:178 POST MY_API_URL net::ERR_HTTP2_PROTOCOL_ERROR
createError.js:16 Uncaught (in promise) Error: Network Error at
createError (createError.js:16) at XMLHttpRequest.handleError
(xhr.js:83)
I'm doing a simple POST request
(React code):
const postData = async()=>{
let res = await Axios.post('/terrenos', {'idTerreno':'0'} );
console.log( res.data );
}
And in the API side I just have this for debugging(PHP Code):
if( $_SERVER["REQUEST_METHOD"] === 'GET'){
main($_GET);
}else if( $_SERVER["REQUEST_METHOD"] === 'POST'){
echo(json_encode($_POST));
}
When I dont send anything in body it works just fine (It returns an empty array)
const postData = async()=>{
let res = await
Axios.post('https://gpgpy.000webhostapp.com/papaProject/API/v2/query.php');
console.log( res.data );
}
And when I use postman for the same request it with and without body it works too.
I ran into the same issue using Axios with React and a PHP web service hosted on 000webhost. It works perfectly fine with Postman as well as the vanilla fetch function. Odd, seems to be a compatibility issue between Axios and 000webhost...
My solution was to use fetch instead of Axios for my API calls, as I didn't see any particular reason to use Axios in my scenario.
Here's a good example on how to use fetch with POST.
Seems like you asked about it 3 months ago, so I hope you found a solution earlier than I could reply. If you managed to utilize Axios with 000webhost, please share your wisdom 😎
im want to call haveibeenpwned v3 API,
here is my code
<script>
$.ajax({
url:"https://haveibeenpwned.com/api/v3/breachedaccount/brian.c#softnet.co.id",
headers: { 'Content-type': 'x-www-form-urlencoded', 'hibp-api-key': 'my-key'},
async: false,
datatype:'application/json',
success:function(data){
alert("a");
},
error:function(data){
console.log(JSON.stringify(data));
}
});
</script>
but i always get this this error at the console
{"readyState":0,"status":0,"statusText":"NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://haveibeenpwned.com/api/v3/breachedaccount/brian.c#softnet.co.id'."}
pls help me if you ever use haveibeenpwned.com
i already doing this way with another api, this is my first time with headers
i expect the json output
You likely have some other errors in your console too which are more relevant than the one you posted - including, I expect, a CORS-related error.
According to https://haveibeenpwned.com/API/v3#CORS you may have a problem because
"CORS is only supported for non-authenticated APIs".
...and according to https://haveibeenpwned.com/API/v3#Authorisation
Authorisation is required for all APIs that enable searching HIBP by email address...The key is then passed in a "hibp-api-key" header
Therefore the endpoint you are trying to search is one requiring authentication/authorisation and as such you are not allowed to make a CORS (cross-origin ) AJAX request to it.
In conclusion you will need to connect to this API via your server-side code instead.
This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 5 years ago.
I have a react app without a backend that is using localhost. In a component, there is an onClick handler which calls an external API to get data. The state is amended to have a piece of state be the return value of the API.
The code for that call:
fetch(statsURL)
.then(function(response) {
return response.resultSets.rowSet
})
This generates the following error:
In the Network details, I do get a 200 OK status code, and here is the header info:
Let me know if you have any suggestions. Thanks
You can use YQL to request resources that are not served with CORS headers. To get the response from a fetch() call use Response.text(), Response.json(), Response.blob() or Response.arrayBuffer()
fetch(statsURL)
.then(function(response) {
return response.json()
})
.then(function(data) {
console.log(data.resultSets.rowSet)
})
.catch(function(err) {
console.error(err)
})