lucstechblog: Solving the CORS error with Javascript

For an index to all my stories click this text.

This story shows how to beat the dreaded CORS error in Javascript.

What is a CORS error.

When you open a webpage or try to fetch information from a web service that page or service comes from a specific origin.

For example.
- https://lucstechblog.blogspot.com/ is a specific origin
- https://www.wikipedia.org/ is another origin
- https://hackaday.com/blog/ is yet another origin

Web browsers protect their users by enforcing something called the Same-Origin Policy. The definition of this policy is:

“A web page can only make requests to the same origin it came from —
unless the other server explicitly allows it.”

So if you are running a webpage on your computer and it tries to access a page on the web for fetching some information you can get an error like this:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

That is the CORS error (CORS = Cross-Origin Resource Sharing)

And your webpage might just do nothing. To see this error you will have to open the developer console in your browser.

To avoid this happening the server that sends the information to you needs to put a special header on it's webpage:

Access-Control-Allow-Origin: *

Without this header the server blocks responses for safety.

What is the purpose

There are several purposes to block a cross origin request. But one of the obvious ones is to prevent web-scrapers to get information from a webpage. A user can open the webpage in his browser but any fetch commands that wnt to get informtion will not work.

Simply said: humans can visit but but other sites can’t programmatically fetch and read them.

Cors error in real life

Let's have a look at a simple webpage on the internet that is made for testing purposes: example.com

As you can see this page opens just fine in your web browser.

And here is a demo webpage that tries to fetch information from the website example.com

<!doctype html>
<html>
<body>
  <h2>CORS Demo — Destined to fail</h2>

    Target URL:<br>
    <input id="target" size="30" value="https://example.com/">

    <br><br>

    <button id="fetchBtn">Try to fetch data</button>

  <h3>Output:</h3>
  <pre id="output">Click the button...</pre>

<script>
document.getElementById("fetchBtn").onclick = function() {
  const target = document.getElementById("target").value;
  const output = document.getElementById("output");
  output.textContent = "Fetching directly from: " + target + "\n\n";

  fetch(target)
    .then(r => r.text())
    .then(t => output.textContent += "✅ Unexpected success:\n\n" + t)
    .catch(e => output.textContent += "❌ Expected CORS error:\n" + e);
};
</script>
</body>
</html>

Nothing too complicated here.
the fetch command tries to access the https://example.com/ webpage and puts the response in the output field.

This is how the webpage looks.

And this is what is displayed on the page when the button is clicked.

I opened the web-developers menu and here you can clearly see the cors error in the console.

Just like said before: humans can visit but but other sites can’t programmatically fetch and read them.

But how to prevent this..............

There is a website with the name https://allorigins.win/

Simply said: you send your fetch command to that site. They wrap it up in such a way that the cors error is avoided and send the answer back to you.

Here is a simple webpage that demonstrates this:

<!doctype html>
<html>

<body>
  <h2>CORS Demo — With AllOrigins<br>that works</h2>


    Target URL:
    <br><br>
    <input id="target" size="30" value="https://example.com/">

    <br><br>
    <button id="fetchBtn">Fetch the data</button>


  <h3>Output:</h3>
  <pre id="output">Click the button...</pre>

<script>
document.getElementById("fetchBtn").onclick = function() {
  const target = document.getElementById("target").value;
  const encoded = encodeURIComponent(target);
  const proxy = "https://api.allorigins.win/get?url=" + encoded;
  const output = document.getElementById("output");

  output.textContent = "Fetching via AllOrigins...\n\n";

  fetch(proxy)
    .then(r => r.json())
    .then(data => {
      const snippet = data.contents.substring(0, 500);
      output.textContent += "✅ Success via AllOrigins!\n\n" + snippet + "\n\n... (truncated)";
    })
    .catch(e => output.textContent += "❌ Proxy fetch failed:\n" + e);
};
</script>
</body>
</html>

The page looks and acts the same as the previous one. So let us have a quick look at the changes that makes the magic happen.

  const target = document.getElementById("target").value;
  const encoded = encodeURIComponent(target);
  const proxy = "https://api.allorigins.win/get?url=" + encoded;

When the button is clicked the target website (https://example.com/) is put in the target variable and URI encoded.
Next this encoded value is added to theAllOrigins api and put in the variable proxy.

  fetch(proxy)
    .then(r => r.json())
    .then(data => {
      const snippet = data.contents.substring(0, 500);
      output.textContent += snippet + "\n\n... (truncated)";
    })

The constructed api (the variable proxy) is fetched from the website and the result is put in the variable snippet (the first 500 characters) and then put in the output field.

Here is the webpage that achieves this again.

And this is what we get when we press the button. The required information is indeed obtained. Just what we needed.

Of course this is just a stupid example. But there are real world situations where this can be invaluable. I have an example coming up in a future story.

Sidenote

The discussed HTML pages contain Javascript code. Javascript is easy and you get immediate results in your browser: so on your computers screen. Javascript code will work on Firefox as well on Chrome on PC's and Raspberry's equally well. It is cross-compatible to most systems.
But Javascript is also very extensive and there are a lot of nice tricks to accomplish things. I bundled more than 500 tips and tricks to address programing problems in a neat book. Available from Amazon world wide:

Click here to get more info or buy the book.

Caveats ??

Well there are some things to consider when using the AllOrigins api.
First it is an external service you are using. And as we have seen in the past they might just pull the plug or start charging money for their service.

But it is a foss (free and open source) service. You can get the code on:
https://github.com/gnuns/allorigins
and there you can even find how to install AllOrigin on your own server.
If you are going to use this frequent I urge you to do so. A small Raspberry Pi might do the trick although I have not tested that yet.

Another thing of concern is that you are sending data to a webservice. So never send fetch commands that contain sensitive information like passwords or bank details etc. These might get compromised.

There are a kazillion websites and services out there. So I can not say if this works on each service on the internet. So test before you build an actual project with this.

But for now I have solved one of my problems with this method.

Till next time
have fun

Luc Volders

Friday, January 23, 2026

Solving the CORS error with Javascript