0

I am trying to fetch from 3rd party API in my frontend app, and an error returned saying

Access to XMLHttpRequest at 'https://theapi.com/api/v1' from origin 'http://localhost:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

while I move the http client to backend, and fetch data from there, it works like a charm, I am wondering what's the difference here?

PS: I tried to set User-Agent for my frontend http client request, it doesn't make any changes.

leomayleomay
  • 553
  • 1
  • 7
  • 16
  • 1
    Browsers are not allowed to perform cross-origin queries by default. Servers have no such restrictions. – Barmar Dec 10 '20 at 21:43
  • 1
    Backend web requests are not an issue with cors, because it is guarenteed to be coming from your server. Where as frontend web requets could be injected into a web site by a malicious script. – Taplar Dec 10 '20 at 21:44
  • because the backend does not have the user's cookies and other stuff which makes it unsafe. Imagine if someone could make a request directly to a bank account or email without you seeing it..... – epascarello Dec 10 '20 at 21:44
  • you can change some browsers to work via localhost to avoid CORS errors. google it. – J nui Dec 10 '20 at 21:45
  • In additon to previous comments, the browser makes a pre-flight request to the server for simple requests (GET, POST) that have specific `content-types`. It then verifies that the server can authorise access to the requested resource. Note the error does not come from javascript code. JS code does not **know** the reason the request was rejected. – rags2riches-prog Dec 10 '20 at 21:54
  • Thank you everyone for your prompt answers. I reckon I need to read more about CORS. With that being said, a workaround I've found is https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141 – leomayleomay Dec 10 '20 at 22:04

0 Answers0