0

I know there is a litter such questions and I have tried to read them but non are quite fitting the symptoms under which I am getting blocked by CORS. Here is my simple HTML with the script that makes the HTTP GET request. I serve this index.html using the Live Server.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing</title>
  </head>
  <body>
    <script>
      let url1 = 'https://api.dictionaryapi.dev/api/v2/entries/en/hello' // works fine
      let url2 = 'https://evilinsult.com/generate_insult.php?type=json' // CORS Error
      fetch(url2)
        .then(r => r.json())
        .then(json => console.log(json))
    </script>
  </body>
</html>

Note that both these URLs work fine when I just paste them in the browser address bar. However, while the url1 works fine, url2 gets blocked with,

127.0.0.1/:1 Access to fetch at 'https://evilinsult.com/generate_insult.php?type=json' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I understand I can do something like Access-Control-Allow-Origin: * but why do I have to? I checked the headers the browser sets when url2 is pasted into the address bar and this specific key is not even present there.

Could someone help me understand why one fetch is successful, the other fails and both work in the browser address bar?

scribe
  • 673
  • 2
  • 6
  • 17
  • 1
    `Access-Control-Allow-Origin: *` would have to be added by them, not you. The browser does not set those headers, the url2's devs have to set those headers. Essentially they have to opt in to allow requests by other domains. – Peter Krebs Jul 14 '23 at 07:34
  • 1
    Maybe you need some API token first or you are meant to request the API with server-side code only. Do their help pages / support have anything on that? I don't think your question is entirely wrong to ask, CORS issues just have been asked a lot of times. Maybe you should research similar issues on StackOverflow first and then show your case is different. – Peter Krebs Jul 14 '23 at 08:35
  • Does this answer your question? [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) – jub0bs Jul 14 '23 at 09:25
  • @scribe Read https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy and then https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS – jub0bs Jul 14 '23 at 09:25
  • @PeterKrebs [Here](https://evilinsult.com/api/#generate-insult-get) is the website for the insults API. I don't see any mentions of API tokens. I am also slightly confused by why the fetch works on "server side code," I mean why does their endpoint care if the client is running on "server-side" or "front-end"? – scribe Jul 15 '23 at 23:13
  • @jub0bs I tried reading those and similar questions. I don't set any of the mentions headers causing a preflight. I also am not really doing any authorisation or something else that complicated. It feels strange that the simplest solution is to set-up a proxy? – scribe Jul 15 '23 at 23:22
  • Also, reading on CORS in general confuses me further. It seems the point is to keep random front-ends (FE) from using back-ends (BE) that aren't meant for them... I think. So when the FE and BE domains don't match, the browsers fails etc. But why is this true for a service that is explicitly a public API? Meant to be used by _other domains_. E. g., the National (US) Weather Service API does the same thing: https://api.weather.gov/gridpoints/TOP/31,80/forecast – scribe Jul 15 '23 at 23:26
  • You've got it a bit backwards. Those restrictions are enforced by the Same-Origin Policy, and CORS is a mechanism to lift those restrictions. – jub0bs Jul 16 '23 at 07:57
  • How come the same-origin policy is satisfied when I make the request from the address bar? Should the origin of my address bar and html loaded to my browser not be the same? – scribe Jul 17 '23 at 23:34

0 Answers0