Node.js HTTP Module for Browsers (Browserify)

1.7.0 · maintenance · verified Tue Apr 21

http-browserify provides a browser-compatible implementation of Node.js's native `http` module, specifically designed to be used with Browserify. When bundling browser-side code with Browserify, this package allows `require('http')` calls to function correctly, enabling HTTP requests from the browser environment using a Node.js-like API. The current stable version is 1.7.0. This package is part of the broader Browserify ecosystem, which focuses on bringing Node.js modules to the browser. It implements core HTTP client functionalities such as `http.request`, `http.get`, and methods for managing headers and data streams. Key differentiators include its tight integration with Browserify's module resolution and its effort to mimic the Node.js API, making it easy for developers to port server-side HTTP logic to the client.

Common errors

```
Uncaught ReferenceError: require is not defined
```
cause `require('http')` is being called in a browser environment without prior bundling by Browserify.

fix Ensure your JavaScript code is bundled using Browserify. Run `browserify your-entry-file.js -o bundle.js` and include `bundle.js` in your HTML. `http-browserify` only works when processed by Browserify.
```
TypeError: Cannot read properties of undefined (reading 'on') when calling res.on('data')
```
cause The `res` (response) object from `http.get` or `http.request` might not be fully initialized or an error occurred before the response stream was ready.

fix Ensure the callback passed to `http.get` or `http.request` properly receives the `res` object. Check for network errors or server issues that might prevent a valid HTTP response, or handle errors on the `req` object itself.

Warnings

gotcha Multipart streaming responses are buffered in older browsers (Internet Explorer 5.5-9, Opera 10.6). Modern browsers (Firefox 3.5+, Chrome 7.0+, Safari 5.0+) provide unbuffered streams for content-types like `multipart/octet-stream`.
Fix: Be aware of buffering behavior differences when targeting older browsers. Implement client-side buffering or progressive rendering if necessary for older browser compatibility, or ensure modern browser targets for true streaming.
deprecated `http-browserify` is primarily designed for the Browserify ecosystem. While still functional, newer bundling tools like Webpack and Rollup often provide their own strategies for polyfilling Node.js APIs or encourage explicit browser-native APIs (e.g., `fetch` or `XMLHttpRequest`).
Fix: For new projects, consider using `fetch` or `XMLHttpRequest` directly for HTTP requests, or leverage modern bundler features for polyfilling if Node.js-like APIs are preferred. For existing Browserify projects, continue using `http-browserify`.
gotcha The `http.request` `opts.host` and `opts.port` default to `window.location.host` and `window.location.port` respectively. This means requests are implicitly made to the same origin unless explicitly specified.
Fix: Always explicitly set `opts.host` and `opts.port` (and `opts.protocol` if necessary) when making requests to a different origin to avoid unexpected same-origin requests. Be mindful of CORS implications for cross-origin requests.

Install

npm install http-browserify npm
yarn add http-browserify yarn
pnpm add http-browserify pnpm

Imports

http
```
const http = require('http');
```
This package is designed for CommonJS environments and Browserify bundling. It directly shims Node.js's 'http' module.
http
wrong:
```
var bundle = browserify().require('http-browserify', { expose: 'http' });
```
correct:
```
var bundle = browserify({ require : { http : 'http-browserify' } });
```
When using Browserify, `http-browserify` typically transparently replaces the Node.js 'http' module. If explicit mapping is needed, use the `require` option during bundling as shown.

Quickstart

Demonstrates how to perform a basic GET request using the `http` module API in a Browserify-bundled environment, handling data and end events.

const http = require('http');

const resultDiv = document.createElement('div');
resultDiv.id = 'result';
document.body.appendChild(resultDiv);

// Mock server response for demonstration in a real browserify context
// In a true browser environment, this would hit an actual endpoint.
const mockEndpoint = '/beep';

console.log(`Making a GET request to ${mockEndpoint}`);

http.get({ path : mockEndpoint }, function (res) {
    resultDiv.innerHTML += `GET ${mockEndpoint}<br>`;
    
    res.on('data', function (buf) {
        resultDiv.innerHTML += `Received data: ${buf}<br>`;
    });
    
    res.on('end', function () {
        resultDiv.innerHTML += '<br>__END__';
        console.log('Request ended.');
    });

    res.on('error', function(err) {
        resultDiv.innerHTML += `Error: ${err.message}<br>`;
        console.error('Request error:', err);
    });
});

// To make this runnable without a backend, you'd typically intercept the request
// For a real-world scenario, '/beep' would be served by a backend.
// This example demonstrates the client-side API usage.

view raw JSON →