How to make cors work on Github Pages?

[anburocky3]

Currently for testing, i'm using https://ipv4.icanhazip.com/ to get the client ip. But it has cors enabled.

So inorder to make it bypass, i made a server proxy like this.

export default defineConfig({
  base: "/Get-My-IP-Web-App/",
  server: {
    cors: false,
    proxy: {
      "/Get-My-IP-Web-App/ip": {
        target: "https://ipv4.icanhazip.com/",
        changeOrigin: true,
        secure: false,
      },
    },
  },
});

And i'm calling it like this,

let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
    if (this.status === 200) {
      ipAddressPlaceholder.textContent = xhr.responseText;
    } else {
      ipAddressPlaceholder.innerHTML =
        "<div class='alert-danger'>COULDN'T GET YOUR IP. <a href='/Get-My-IP-Web-App/' class='retry-btn'>Retry</a></div>";
    }
  }
};
xhr.open(
  "GET",
  // "https://cors-anywhere.herokuapp.com/https://ipv4.icanhazip.com/"
  "/Get-My-IP-Web-App/ip"
);
xhr.send();

When i check it on localhost, it is working as expected, but when i deploy it to github pages, it is failing..?

You can check the live url here: https://anburocky3.github.io/Get-My-IP-Web-App/

[chaejunlee]

Yes, github pages don't give you a sever to work with. It only deploys static contents, such as HTML, CSS, JS.

I see that you are using proxy server which github pages don't provide. So, using proxy won't work if you are deploying your app on github pages.

try something like this:

fetch("https://ipv4.icanhazip.com/").then(v => v.text()).then(v => console.log(v))

Here is the working repro of what you are trying to do.

https://stackblitz.com/edit/github-zlyyvu?file=assets/js/main.js,vite.config.js

If it helped, please mark me as an answer. Thank you.

[chaejunlee]

If you are getting net::ERR_BLOCKED_BY_CLIENT that is because you are using adblock. Turn it off and try again.

[chaejunlee]

It looks like just fetching from https://ipv4.icanhazip.com/ cause no error. You can just use fetch.

[anburocky3]

Adblocks were blocking the request. Disabling it fixes the problem.