Testing API was never been easy! Use Hoppscotch

Have you ever wished for a way to effortlessly design and test APIs? Well, say hello to Hoppscotch, your trusty companion in the API testing adventure! With Hoppscotch, you can embark on a journey of API exploration and experimentation, all with a touch of whimsical delight. No downloads or sign-up hoops to jump through—just pure API testing magic! But wait, there's a little twist when it comes to testing APIs hosted locally. Fear not, my friend, for Hoppscotch has a solution that will make you grin from ear to ear!

Let's dive into the world of Cross-Origin Resource Sharing (CORS). It's like a set of rules that govern the sharing of goodies between different domains. To keep things secure and prevent naughty interactions, CORS enforces a strict same-origin policy, which limits a website's ability to venture beyond its own domain. Now, to access APIs on your local server using the Hoppscotch web client, you'll need a special extension that acts as a master key, unlocking the power of local API testing. Forget to install it, and you'll be greeted by a grumpy error message when you attempt to send a request to your localhost playground.

Oh no! The mischievous error when Hoppscotch meets localhost

But fret not! We have a marvelous tool called the Hoppscotch web extension that breaks through the barriers of CORS, allowing you to request data from localhost like a champ. To get your hands on this extension, simply follow the links below for your preferred browser:

1. Hoppscotch web extension for Firefox - Get it here!
2. Hoppscotch web extension for Chrome / Chromium - Snag it now!

Once you've acquired this mighty extension, click on the Hoppscotch icon in your browser extensions menu. Then, let it know the URL of your local server, be it http://localhost or http://localhost:port, depending on your server configuration. It's as easy as a flick of a wand!

Behold! The magnificent Hoppscotch web extension

Now, refresh the Hoppscotch web app, and on the settings page, head over to the interceptor section. Select the browser extension middleware option and feel the power coursing through your veins!

The amazing Hoppscotch interceptor settings

Now, let's put your newly configured Hoppscotch to the test and embark on a fun API journey! We'll create a simple proxy for the marvelous JSONPlaceholder API. Brace yourself for a joyful coding adventure!

First, let's set up a simple server-side proxy. Create a new file called proxy.js and copy the following code into it:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

app.use(
  '/api',
  createProxyMiddleware({
    target: 'https://jsonplaceholder.typicode.com',
    changeOrigin: true,
  })
);

app.listen(3000, () => {
  console.log('Proxy server listening on port 3000');
});

Next, open your terminal and navigate to the directory where you created proxy.js. Run the following command to install the necessary dependencies:

npm install express http-proxy-middleware

Once the dependencies are installed, start the proxy server by running:

node proxy.js

You'll see a delightful message in your terminal, announcing that the proxy server is listening on port 3000.

Now, fire up your Hoppscotch web client and start exploring the JSONPlaceholder API through your localhost proxy. Send requests to http://localhost:3000/api/posts or any other endpoints you desire, and

relish in the JSON response goodness.

Hoppscotch configured for localhost API fun!

Just like that, you've created a whimsical proxy server to access the JSONPlaceholder API through your localhost playground. Enjoy the wonders of API development with Hoppscotch!

If you're eager to dive into more API adventures, visit https://hoppscotch.io to start your journey right away.