Questions tagged [fetch-api]
The Fetch API is an improved replacement for XHR, for making asynchronous HTTP requests while better managing redirects and interaction with CORS and Service Workers.
fetch-api
6,176
questions
1304
votes
33
answers
3.9m
views
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
I'm trying to fetch some data from the REST API of HP Alm. It works pretty well with a small curl script—I get my data.
Now doing that with JavaScript, fetch and ES6 (more or less) seems to be a ...
- 16.1k
1102
votes
19
answers
1.8m
views
Fetch: POST JSON data
I'm trying to POST a JSON object using fetch.
From what I can understand, I need to attach a stringified object to the body of the request, e.g.:
fetch("/echo/json/",
{
headers: {
'...
- 28.9k
522
votes
13
answers
777k
views
Setting query string using Fetch GET request
I'm trying to use the new Fetch API:
I am making a GET request like this:
var request = new Request({
url: 'http://myapi.com/orders',
method: 'GET'
});
fetch(request);
However, I'm unsure how ...
- 6,529
515
votes
12
answers
1.2m
views
Trying to use fetch and pass in mode: no-cors
I can hit this endpoint, http://catfacts-api.appspot.com/api/facts?number=99 via Postman and it returns JSON
Additionally I am using create-react-app and would like to avoid setting up any server ...
- 5,408
408
votes
14
answers
463k
views
Retrieve data from a ReadableStream object?
How may I get information from a ReadableStream object?
I am using the Fetch API and I don't see this to be clear from the documentation.
The body is being returned as a ReadableStream and I would ...
- 6,524
391
votes
11
answers
606k
views
How do I post form data with fetch api?
My code:
fetch("api/xxx", {
body: new FormData(document.getElementById("form")),
headers: {
"Content-Type": "application/x-www-form-urlencoded",
// "Content-Type": "multipart/...
- 4,209
389
votes
18
answers
388k
views
How do I POST a x-www-form-urlencoded request using Fetch?
I have some parameters that I want to POST form-encoded to my server:
{
'userName': '[email protected]',
'password': 'Password!',
'grant_type': 'password'
}
I'm sending my request (...
- 6,107
359
votes
12
answers
496k
views
Fetch API with Cookie
I am trying out the new Fetch API but is having trouble with Cookies. Specifically, after a successful login, there is a Cookie header in future requests, but Fetch seems to ignore that headers, and ...
- 12.1k
344
votes
12
answers
208k
views
What is difference between Axios and Fetch? [closed]
I'm trying to call a web service for my application, and there are two options available: Fetch and Axios. I'm not sure which one to choose, so I'm looking for information to help me decide. Can you ...
- 9,588
340
votes
11
answers
455k
views
How do I upload a file with the JS fetch API?
I am still trying to wrap my head around it.
I can have the user select the file (or even multiple) with the file input:
<form>
<div>
<label>Select file to upload</label&...
- 14.5k
312
votes
7
answers
208k
views
How do I cancel an HTTP fetch() request?
There is a new API for making requests from JavaScript: fetch(). Is there any built in mechanism for canceling these requests in-flight?
- 10.2k
298
votes
4
answers
166k
views
Fetch API vs XMLHttpRequest
I know that Fetch API uses Promises and both of them allow you to do AJAX requests to a server.
I have read that Fetch API has some extra features, which aren't available in XMLHttpRequest (and in ...
- 4,500
291
votes
16
answers
381k
views
Fetch API request timeout?
I have a fetch-api POST request:
fetch(url, {
method: 'POST',
body: formData,
credentials: 'include'
})
I want to know what is the default timeout for this? and how can we set it to a ...
- 7,228
283
votes
9
answers
335k
views
Basic authentication with fetch?
I want to write a simple basic authentication with fetch, but I keep getting a 401 error. It would be awesome if someone tells me what's wrong with the code:
let base64 = require('base-64');
let url =...
- 16.1k
250
votes
14
answers
493k
views
Fetch: reject promise and catch the error if status is not OK?
Here's what I have going:
import 'whatwg-fetch';
function fetchVehicle(id) {
return dispatch => {
return dispatch({
type: 'FETCH_VEHICLE',
payload: fetch(`http:...
- 5,222
245
votes
7
answers
196k
views
Why does .json() return a promise, but not when it passes through .then()?
I've been messing around with the fetch() api recently, and noticed something which was a bit quirky.
let url = "http://jsonplaceholder.typicode.com/posts/6";
let iterator = fetch(url);
iterator
...
- 2,599
238
votes
42
answers
466k
views
React Native fetch() Network Request Failed
When I create a brand new project using react-native init (RN version 0.29.1) and put a fetch in the render method to the public facebook demo movie API, it throws a Network Request Failed. There is a ...
- 4,815
229
votes
4
answers
163k
views
What is an opaque response, and what purpose does it serve?
I tried to fetch the URL of an old website, and an error happened:
Fetch API cannot load http://xyz.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://abc' ...
- 24.1k
227
votes
5
answers
634k
views
Using an authorization header with Fetch in React Native
I'm trying to use fetch in React Native to grab information from the Product Hunt API. I've obtained the proper Access Token and have saved it to State, but don't seem to be able to pass it along ...
- 5,256
216
votes
15
answers
187k
views
Upload progress indicators for fetch?
I'm struggling to find documentation or examples of implementing an upload progress indicator using fetch.
This is the only reference I've found so far, which states:
Progress events are a high-level ...
- 20.4k
212
votes
6
answers
178k
views
How to check if the response of a fetch is a json object in javascript
I'm using fetch polyfill to retrieve a JSON or text from a URL, I want to know how can I check if the response is a JSON object or is it only text
fetch(URL, options).then(response => {
// how ...
- 5,513
198
votes
3
answers
336k
views
How do I POST with multipart form data using fetch?
I am fetching a URL like this:
fetch(url, {
mode: 'no-cors',
method: method || null,
headers: {
'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
'Content-Type':...
- 7,839
189
votes
19
answers
479k
views
React useEffect causing: Can't perform a React state update on an unmounted component
When fetching data I'm getting: Can't perform a React state update on an unmounted component. The app still works, but react is suggesting I might be causing a memory leak.
This is a no-op, but it ...
- 2,957
184
votes
12
answers
276k
views
How can I download a file using window.fetch?
If I want to download a file, what should I do in the then block below?
function downloadFile(token, fileId) {
let url = `https://www.googleapis.com/drive/v2/files/${fileId}?alt=media`;
return ...
- 6,536
182
votes
18
answers
845k
views
Getting "TypeError: Failed to fetch" when the request hasn't actually failed
I'm using fetch API within my React app. The application was deployed on a server and was working perfectly. I tested it multiple times. But, suddenly the application stopped working and I've no clue ...
- 3,186
181
votes
15
answers
405k
views
What does it mean when an HTTP request returns status code 0?
What does it mean when JavaScript network calls such as fetch or XMLHttpRequest, or any other type of HTTP network request, fail with an HTTP status code of 0?
This doesn't seem to be a valid HTTP ...
- 21.9k
177
votes
12
answers
194k
views
JavaScript fetch - Failed to execute 'json' on 'Response': body stream is locked
When the request status is greater than 400(I have tried 400, 423, 429 states), fetch cannot read the returned json content. The following error is displayed in the browser console
Uncaught (in ...
- 2,292
173
votes
4
answers
139k
views
fetch(), how do you make a non-cached request?
with fetch('somefile.json'), it is possible to request that the file be fetched from the server and not from the browser cache?
in other words, with fetch(), is it possible to circumvent the browser'...
- 19.8k
172
votes
5
answers
390k
views
How to use fetch in TypeScript
I am using window.fetch in Typescript, but I cannot cast the response directly to my custom type:
I am hacking my way around this by casting the Promise result to an intermediate 'any' variable.
...
- 27.7k
151
votes
5
answers
208k
views
Read the body of a Fetch Promise
I have the following express endpoint for uploading to Google Cloud storage. It works great and the response from the google api gives me a unique file name that I want to pass back to my front end:
...
- 3,466
148
votes
7
answers
515k
views
Allow Access-Control-Allow-Origin header using HTML5 fetch API
I am using HTML5 fetch API.
var request = new Request('https://davidwalsh.name/demo/arsenal.json');
fetch(request).then(function(response) {
// Convert to JSON
return response.json();
})....
- 3,769
137
votes
8
answers
188k
views
fetch - Missing boundary in multipart/form-data POST
I want to send a new FormData() as the body of a POST request using the fetch api
The operation looks something like this:
var formData = new FormData()
formData.append('myfile', file, 'someFileName....
- 5,557
130
votes
10
answers
234k
views
fetch gives an empty response body
I have a react/redux application and I'm trying to do a simple GET request to a sever:
fetch('http://example.com/api/node', {
mode: "no-cors",
method: "GET",
headers: {
"Accept": "...
- 1,690
118
votes
8
answers
192k
views
Returning HTML With fetch()
I'm trying to fetch a file and return its HTML. However it's not as simple as I'd have imagined.
fetch('/path/to/file')
.then(function (response) {
return response.body;
})
.then(...
- 6,107
116
votes
11
answers
218k
views
fetch() unexpected end of input
I am using fetch() to grab data from api server. My error looks like this:
Uncaught (in promise) SyntaxError: Unexpected end of input at
fetch.then.blob.
Can you please tell me what am I doing ...
- 1,263
112
votes
1
answer
68k
views
What limitations apply to opaque responses?
Opaque responses are defined as part of the Fetch API, and represent the result of a request made to a remote origin when CORS is not enabled.
What practical limitations and "gotchas" exist around ...
- 55.3k
108
votes
3
answers
178k
views
How to set the content-type of request header when using Fetch APi
I am using npm 'isomorphic-fetch' to send requests. The problem I am experiencing is I am unable to set the content-type of the request header.
I set a content type of application/json , however the ...
- 16.7k
107
votes
5
answers
108k
views
fetch() does not send headers?
I am sending POST request like this from browser:
fetch(serverEndpoint, {
method: 'POST',
mode: 'no-cors', // this is to prevent browser from sending 'OPTIONS' method request first
...
- 17.6k
107
votes
10
answers
307k
views
Javascript: Fetch DELETE and PUT requests
I have gotten outside of GET and POST methods with Fetch. But I couldn't find any good DELETE and PUT example.
So, I ask you for it. Could you give a good example of DELETE and PUT methods with ...
- 1,417
96
votes
9
answers
95k
views
How can I download and save a file using the Fetch API? (Node.js)
I have the url to a possibly large (100+ Mb) file, how do I save it in a local directory using fetch?
I looked around but there don't seem to be a lot of resources/tutorials on how to do this.
- 1,371
94
votes
3
answers
70k
views
When do browsers send the Origin header? When do browsers set the origin to null?
As you can see from this Bugzilla thread (and also), Firefox does not always send an Origin header in POST requests. The RFC states that it should not be sent in certain undefined "privacy-...
- 1,217
93
votes
9
answers
167k
views
How to make javascript fetch synchronous?
I'm using fetch to get data json from an api. Works fine but I have to use it repeatedly for various calls, thus it needs to be synchronous or else I need some way to update the interface when the ...
- 3,873
92
votes
9
answers
126k
views
How can I fetch an array of URLs with Promise.all?
If I have an array of urls:
var urls = ['1.txt', '2.txt', '3.txt']; // these text files contain "one", "two", "three", respectively.
And I want to build an object that looks like this:
var text = ['...
user2467065
92
votes
3
answers
149k
views
Getting Text From Fetch Response Object
I'm using fetch to make API calls and everything works but in this particular instance I'm running into an issue because the API simply returns a string -- not an object.
Typically, the API returns ...
- 29.2k
90
votes
5
answers
121k
views
How to fetch XML with fetch api
I'm trying to making a weather app that displays the weather and the temperature of many days of the week. I'm currently using openweathermap api for such task, the thing is that the information that ...
- 1,037
78
votes
7
answers
186k
views
POST Request with Fetch API?
I know that with the new Fetch API (used here with ES2017's async/await) you can make a GET request like this:
async getData() {
try {
let response = await fetch('https://example.com/api')...
- 6,981
74
votes
2
answers
70k
views
Fetch vs. AjaxCall
What is the difference between typical AJAX and Fetch API?
Consider this scenario:
function ajaxCall(url) {
return new Promise(function(resolve, reject) {
var req = new XMLHttpRequest();
...
- 4,862
73
votes
1
answer
365k
views
Enable CORS in fetch api [duplicate]
I am getting the following error message that unable me to continue
Failed to load https://site/data.json: Response to preflight request
doesn't pass access control check: No 'Access-Control-...
- 1,343
72
votes
2
answers
58k
views
What is the difference between isomorphic-fetch and fetch?
I've seen two different fetch here:
https://github.com/github/fetch
https://github.com/matthew-andrews/isomorphic-fetch
Can someone tell me the difference between the two?
PS: I've read the README....
- 2,898
72
votes
1
answer
62k
views
set withCredentials to the new ES6 built-in HTTP request API : Fetch
How to set withCredentials=true to fetch which return promise.
Is the following correct :
fetch(url,{
method:'post',
headers,
withCredentials: true
});
I think the MDN documentation ...
- 91.4k