# fetch The Fetch API is a web API for fetching resources, including across a network, and is a more flexible replacement for XMLHttpRequest. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Debugging an HTTP streaming issue affecting browser and node-fetch requests behind Cloudflare DevFeed: [Debugging an HTTP streaming issue affecting browser and node-fetch requests behind Cloudflare]() Original publisher: [Read original article]() Author: Nick Khami Published: 2025-08-01T00:00:00Z Content type: article Language: en Sources: [Mintlify Blog]() Topics: [Streaming](), [HTTP](), [debugging](), [Cloudflare](), [fetch]() Tags: [cloudflare](), [curl](), [debugging](), [engineering](), [failed](), [fetch](), [http](), [postman](), [streaming]() ### AI overview This article describes an HTTP response streaming failure at Mintlify: cURL and Postman worked, while node-fetch and browser fetch failed. The investigation identified Cloudflare's automatic compression settings as the cause, and disabling compression resolved the issue. ### Source excerpt We recently encountered a frustrating issue with HTTP response streaming at Mintlify. Our system uses the AI SDK with the Node stream API to forward streams, and suddenly things stopped working properly. The symptoms were confusing: streaming worked perfectly with cURL and Postman, but failed completely with node-fetch and browser fetch. ## IPFS News Issue 204 DevFeed: [IPFS News Issue 204]() Original publisher: [Read original article]() Published: 2024-04-30T00:00:00Z Content type: news Language: en Sources: [IPFS]() Topics: [IPFS](), [fetch](), [Networks]() Tags: [event](), [fetch](), [gateway](), [helia](), [ipfs](), [kubo](), [libp2p](), [news](), [object-object]() ### AI overview IPFS News 204 highlights registration for IPFS Camp 2024, the release of a fetch-like Web-native abstraction for retrieving content from IPFS-compatible networks, Helia's usage survey, and recent IPFS ecosystem updates. ### Source excerpt Welcome to IPFS News 204! Featuring @helia/verified-fetch and the IPFS Camp 2024 track list. ## Uploading files using 'fetch' and 'FormData' DevFeed: [Uploading files using 'fetch' and 'FormData']() Original publisher: [Read original article]() Author: Stanko Published: 2018-03-19T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [fetch](), [API](), [Web Development]() Tags: [api](), [browser](), [fetch](), [form](), [headers](), [json](), [request]() ### AI overview This tutorial explains how to upload files with fetch and FormData. It shows that the request should not manually set the Content-Type header, allowing the browser to add the multipart boundary required for the server to parse the uploaded file correctly. ### Source excerpt Today I learned: To upload files using fetch and FormDataFormData is supported in IE10+. you must not set Content-Type header. const fileInput = document.querySelector('#your-file-input') ; const formData = new FormData(); formData.append('file', fileInput.files[0]); const options = { method: 'POST', body: formData, // If you add this, upload won't work // headers: { // 'Content-Type': 'multipart/form-data', // } }; fetch('your-upload-url', options); Problem I had # My API wrapper class has default content type header set to: 'Content-Type': 'application/json' So I thought, to upload files using FormData, it would be enough to override it with: 'Content-Type': 'multipart/form-data' But alas, it didn't work, server couldn't parse the files I was uploading. I've wasted about half an hour, and then noticed that simple HTML form was setting something else: Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryIn312MOjBWdkffIM It had this boundary thing I didn't know anything about. Then I started searching around the internet and found the solution. To set the correct boundary, I had to explicitly delete Content-Type header. In that case browser will set the correct boundary itself. Adding this line solved it. // Remove 'Content-Type' header to allow browser to add // along with the correct 'boundary' delete options.headers['Content-Type']; Explanation # What is boundary and why I had to delete the header? Multipart form allow transfer of binary data, therefore server needs a way to know where one field's data ends and where the next one starts. That's where boundary comes in. It defines a delimiter between fields we are sending in our request (similar to & for GET requests). You can define it yourself, but it is much easier to let browser do it for you. Example payload: ------WebKitFormBoundaryIn312MOjBWdkffIM Content-Disposition: form-data; name="file"; filename="my-image.jpg" Content-Type: image/jpeg ------WebKitFormBoundaryIn312MOjBWdkffIM Content-Dispos ## Simple JavaScript API wrapper DevFeed: [Simple JavaScript API wrapper]() Original publisher: [Read original article]() Author: Stanko Published: 2017-12-06T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [API](), [JavaScript](), [fetch](), [Promise](), [HTTP]() Tags: [api](), [es2015](), [fetch](), [http](), [javascript](), [javascript-api](), [polyfill]() ### AI overview A tutorial presenting a reusable JavaScript API wrapper built around native fetch. It explains parsing successful responses, converting HTTP failures and unresolved requests into custom errors, and handling the returned Promise. The code is provided as a native ES2015 module with usage examples and a CodePen demo using the Star Wars API. ### Source excerpt For handling API calls I have a small snippet I'm copying from project to project. I decided to clean it up, make more generic and share it. It is intended to be a starting point, so you might want to customize it to your custom needs. What it does? # It is a simple wrapper around native fetch.If you need a polyfill isomorphic-fetch is a great one. For successful requests it will parse the response and return it. When HTTP error occursIt detects errors based on request's HTTP status. it will throw a custom error with status code, error message and response (parsed if it is a JSON). If request never gets resolved, same custom error will be thrown but response will be set to null and status code to REQUEST_FAILED. Please note that function will return a Promise so you need to handle how it resolves. Code # It is written as a native ES2015 module, which means you may need to transpile it depending on your browser support policy. // ------------------------------------------------------ // // Simple JavaScript API wrapper // https://muffinman.io/blog/simple-javascript-api-wrapper // ------------------------------------------------------ // // For demo purposes I'm using this awesome Star Wars API const API_URL = 'https://swapi.tech/api'; // Custom API error to throw function ApiError(message, data, status) { let response = null; let isObject = false; // We are trying to parse response try { response = JSON.parse(data); isObject = true; } catch (e) { response = data; } this.response = response; this.message = message; this.status = status; this.toString = function () { return `${ this.message }\nResponse:\n${ isObject ? JSON.stringify(this.response, null, 2) : this.response }`; }; } // API wrapper function const fetchResource = (path, userOptions = {}) => { // Define default options const defaultOptions = {}; // Define default headers const defaultHeaders = {}; const options = { // Merge options ...defaultOptions, ...userOptions, // Merge headers headers: { ...defaultHea