I’ve done it like this: var input = document.querySelector(‘input[type=”file”]’) var data = new FormData() data.append(‘file’, input.files[0]) data.append(‘user’, ‘hubot’) fetch(‘/avatars’, { method: ‘POST’, body: data })
Fetch does not use cookie by default. To enable cookie, do this: fetch(url, { credentials: “same-origin” }).then(…).catch(…);
In order to access the data from a ReadableStream you need to call one of the conversion methods (docs available here). As an example: fetch(‘https://jsonplaceholder.typicode.com/posts/1’) .then(function(response) { // The response is a Response instance. // You parse the data into a useable format using `.json()` return response.json(); }).then(function(data) { // `data` is the parsed version … Read more
Fetch and Axios are very similar in functionality, but for more backwards compatibility Axios seems to work better (fetch doesn’t work in IE 11 for example, check this post) Also, if you work with JSON requests, the following are some differences I stumbled upon with. Fetch JSON post request let url=”https://someurl.com”; let options = { … Read more
A concise, modern approach: fetch(‘https://example.com?’ + new URLSearchParams({ foo: ‘value’, bar: 2, })) How it works: When a string (e.g. the URL) is being concatenated with an instance of URLSearchParams, its toString() method will automatically be called to convert the instance into a string representation, which happens to be a properly encoded query string. If … Read more
mode: ‘no-cors’ won’t magically make things work. In fact it makes things worse, because one effect it has is to tell browsers, “Block my frontend JavaScript code from seeing contents of the response body and headers under all circumstances.” Of course you never want that. What happens with cross-origin requests from frontend JavaScript is that … Read more
With ES2017 async/await support, this is how to POST a JSON payload: (async () => { const rawResponse = await fetch(‘https://httpbin.org/post’, { method: ‘POST’, headers: { ‘Accept’: ‘application/json’, ‘Content-Type’: ‘application/json’ }, body: JSON.stringify({a: 1, b: ‘Textual content’}) }); const content = await rawResponse.json(); console.log(content); })(); Can’t use ES2017? See @vp_art’s answer using promises The question … Read more
This answer covers a lot of ground, so it’s divided into three parts: How to use a CORS proxy to avoid “No Access-Control-Allow-Origin header” problems How to avoid the CORS preflight How to fix “Access-Control-Allow-Origin header must not be the wildcard” problems How to use a CORS proxy to avoid “No Access-Control-Allow-Origin header” problems If … Read more