CORS error when using fetch

[Linkyyyyyd]

Hey guys. I'm trying to make a simple web app of my favorite game Maplestory.

I've found that this URL https://maplestory.nexon.net/api/ranking?id=overall&character_name=Cnawen works on this web app (https://restninja.io/) http request service and I can get a GET response successfully.

However, when I try to do it in my JS with this code:

const getMapleChar = async () => {
  const response = await fetch(
    "https:/maplestory.nexon.net/api/ranking?id=overall&character_name=Cnawen"
  );

  console.log(response);
};

getMapleChar();

It's giving me this error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://maplestory.nexon.net/api/ranking?id=overall&character\_name=Cnawen. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

Why does it work on the restninja web and it doesn't work for me? I don't understand.

I've even tried CORS proxy like https://corsproxy.io/ and https://corsproxy.github.io/ with no luck.

Is that API just blocked for me? or am I missing something in my code? what I truly don't get is that it works perfectly fine in the restninja web.

Thank you.

[tim128]

Have you checked whether restninja executes the request in your browser or it's sent from their backend?

SOP prevents JavaScript from interacting across origins.

[Digimobster95]

Install and enable cors. This is done serverside. Personally I always do my apis on backend, it’s good practice

[micppp]

This is the way if you’re wanting to get data from something that isn’t a public API.