How to Fix the Instagram API CORS Error

Are you trying to pull your photos from the Instagram API onto your own website?

If you are, you’ve probably seen it. That one error that stops you dead in your tracks.

Access to fetch has been blocked by CORS policy...

It’s one of the most frustrating errors you can run into. But what if I told you there’s a simple workaround that takes less than 10 minutes to set up?

Table of Contents

So, What Exactly IS This Instagram API CORS Error?

Let’s break it down without the technical jargon.

CORS stands for Cross-Origin Resource Sharing. Think of it as a security guard for your web browser.

When your website (let’s say yoursite.com) tries to grab data from another domain (like Instagram), the browser’s security guard steps in and asks, “Hey, does Instagram approve of this?”

If Instagram’s servers don’t send back a special permission slip (an HTTP header), the guard blocks the request. This is why you see the Instagram API CORS error. It’s a security feature, not a bug.

Why This Is a Huge Problem for You

With private or unofficial APIs, you can’t just ask them to add the permission slip for you. They are designed to talk to their own app, not to your website’s browser.

So, you’re stuck. You can see the data you want, but your browser refuses to let you touch it. This is where most people give up.

But you’re not going to. Because the solution is simple. ✌️

The Solution: Cloudflare Workers

The best way to bypass the Instagram API CORS block is to not deal with it directly. Instead, we’re going to use a middleman.

Our middleman is a Cloudflare Worker.

A Cloudflare Worker is just a tiny piece of code that runs on Cloudflare’s global network, not in your browser. And here’s the magic part: server-to-server requests do not have CORS restrictions.

The Worker can talk to Instagram freely.

How This Simple Trick Works

The process is brilliant in its simplicity.

Step 1: Your website asks your Cloudflare Worker for the Instagram data (not Instagram directly).
Step 2: The Cloudflare Worker (which has no CORS rules) asks the Instagram API for the data.
Step 3: Instagram happily gives the data to the Worker.
Step 4: The Worker then passes that data back to your website, but it adds the special “permission slip” header that your browser needs to see.

Your browser is happy, you get your data, and the Instagram API CORS error disappears.

Your Step-by-Step Fix: The Code

Ready to implement it? First, you’ll need a free Cloudflare account. Once you have one, go to the “Workers” section and create a new service.

Then, paste this code in.

export default {
  async fetch(request) {
    const url = new URL(request.url);
    url.hostname = "www.instagram.com"; 

    // Clone headers
    const newRequestHeaders = new Headers(request.headers);

    // Override with Instagram-like headers
    newRequestHeaders.set("User-Agent", "Instagram 208.0.0.32.135 (iPhone; iOS 14_7_1; en_US; en-US; scale=2.61; 1080x1920) AppleWebKit/605.1.15");
    newRequestHeaders.set("Accept", "*/*");
    newRequestHeaders.set("Accept-Language", "en-US;q=1");
    newRequestHeaders.set("X-IG-App-ID", "936619743392459");
    newRequestHeaders.set("X-Requested-With", "XMLHttpRequest");
    newRequestHeaders.set("Origin", "https://www.instagram.com");
    // newRequestHeaders.set("Cookie", "");

    
    // Forward the request with modified headers
    const response = await fetch(url.toString(), {
      method: request.method,
      headers: newRequestHeaders,
      body: request.method !== "GET" && request.method !== "HEAD" ? request.body : undefined,
    });

    // Read response as text
    let text = await response.text();
      
    // CORS headers
    const corsHeaders = {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
      "Access-Control-Allow-Headers": "*",
    };

    // Preflight response
    if (request.method === "OPTIONS") {
      return new Response(null, { status: 204, headers: corsHeaders });
    }

    // Merge response headers + CORS
    const newHeaders = new Headers(response.headers);
    for (const [key, value] of Object.entries(corsHeaders)) {
      newHeaders.set(key, value);
    }
    newHeaders.set("content-length", text.length.toString()); // update length

    return new Response(text, {
      status: response.status,
      headers: newHeaders,
    });
  },
};

You can also add your own cookie to the request headers for authentication or session management. To do this, simply uncomment the following line in your code and replace the empty string with your actual cookie value:

// newRequestHeaders.set("Cookie", "");

Deploy the worker, and Cloudflare will give you a new URL (like my-worker.username.workers.dev).

That URL is your new API endpoint! Use it in your website’s code instead of the direct Instagram API link, and you’re done.

Conclusion

Let’s be honest, fighting with API errors is a waste of your time. You have better things to do.

The Instagram API CORS error seems complex, but the solution is straightforward. Don’t try to fight the browser’s security rules. Instead, use a proxy to work around them.

Before you go live, you can quickly check if your CORS setup works using https://cors-test.codehappy.dev/
. It’s a free and easy tool to test if your API endpoint sends the right headers.

Or, if you prefer to test directly from your browser, use a simple JavaScript fetch example like this:

fetch("https://my-worker.username.workers.dev", {
  method: "GET",
})
  .then(response => response.json())
  .then(data => console.log("Success:", data))
  .catch(error => console.error("CORS Error:", error));

If you see a successful response in your console — congrats, your proxy is working perfectly!