How to Test Localhost APIs in Your Browser

by
Table of Contents Hide
1) Introduction
2) 1️⃣ Testing GET Requests in the Browser
2.1) Example: Testing a GET Request
2.2) Common Errors & Fixes
3) 2️⃣ Using Hoppscotch for POST, PUT, and DELETE Requests
3.1) Steps to Test POST Requests with Hoppscotch
4) 3️⃣ Fixing CORS Issues When Testing Local APIs
4.1) For Express.js APIs (Node.js)
4.2) Using a Browser Extension (Alternative Fix)
5) 4️⃣ Using Swagger UI for API Testing
5.1) Steps to Use Swagger UI
6) Conclusion

Introduction

When developing APIs locally, it’s essential to test them before deploying them to production. While tools like Postman and Hoppscotch are commonly used, sometimes you might want to test APIs directly in your browser without installing extra software.

In this guide, we’ll cover different methods to test localhost APIs using only your browser.

1️⃣ Testing GET Requests in the Browser

If your API has GET endpoints, you can test them directly in the browser’s address bar.

Example: Testing a GET Request

If your API is running on localhost:5000 and has an endpoint /api/users, enter this in your browser:

http://localhost:5000/api/users

✔️ If the API is working correctly, you’ll see a JSON response displayed in your browser. ❌ If there’s an error, check your server logs or ensure the API is running.

Common Errors & Fixes

ErrorSolution
Cannot GET /api/usersCheck if the API endpoint exists.
404 Not FoundEnsure the correct URL is used.
CORS Policy BlockedSee Step 3 on how to fix this.

2️⃣ Using Hoppscotch for POST, PUT, and DELETE Requests

Since browsers don’t allow sending POST, PUT, or DELETE requests directly, you need an API testing tool. Hoppscotch is a great browser-based option.

Steps to Test POST Requests with Hoppscotch

  1. Open Hoppscotch in your browser.
  2. Select POST from the dropdown.
  3. Enter the API URL: http://localhost:5000/api/register
  4. Click on Body → JSON and enter your request data: { "name": "John Doe", "email": "[email protected]", "password": "securepassword" }
  5. Click Send and view the response.

🔹 For PUT and DELETE requests, repeat the same process but select the correct HTTP method.

3️⃣ Fixing CORS Issues When Testing Local APIs

Sometimes, your API might block requests due to CORS (Cross-Origin Resource Sharing) restrictions. If you get an error like:

Access to fetch at 'http://localhost:5000/api' from origin 'null' has been blocked by CORS policy.

You can fix it by allowing CORS in your API.

For Express.js APIs (Node.js)

Modify your server.js to allow CORS:

import cors from "cors";
app.use(cors());

Using a Browser Extension (Alternative Fix)

If you can’t modify the API, install a CORS browser extension:

4️⃣ Using Swagger UI for API Testing

If your API has Swagger UI enabled, you can test it easily.

Steps to Use Swagger UI

  1. Run your API server.
  2. Open http://localhost:5000/api-docs in your browser.
  3. Click on any endpoint and send test requests.

✅ Swagger UI provides an interactive way to test your APIs without needing external tools.

Conclusion

By following these methods, you can test your localhost APIs efficiently:

  • GET requests work directly in the browser.
  • POST, PUT, and DELETE requests can be tested using Hoppscotch.
  • Fix CORS issues by modifying your API or using a browser extension.
  • Use Swagger UI for built-in API testing.

Now you can easily test your APIs without installing additional software! 🚀

Leave a Comment