0

I am trying to fetch the price of a stock using fetch in my pure React App. When I try to fetch without options or configurations, using fetch(url), this error comes:

Access to fetch at
'https://query1.finance.yahoo.com/v8/finance/chart/RCF.BO' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

The API : https://query1.finance.yahoo.com/v8/finance/chart/<SYMBOL>.BO is open. I don't seem to have any issue fetching it from my browser directly. It's causing the same issue even when I am including this option to the fetch:

var options = {
  method: 'GET',
  crossorigin: true,
  headers: {
    'Access-Control-Allow-Origin': '*',
  }
}

The error I am getting as per my knowledge and research is common. But the solutions proposed, deals with changing the server configurations and allowing different origins, which are not applicable for me as the API I am using is open. I am not using any backend but just pure React.

Using no-cors also doesn't work as I need the data to be visible so that I can use it. I used some third party extensions while development phase, but now while hosting, it's not fetching the data from the API.

Can someone help with this issue?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Kanchan Bharti
  • 51
  • 8
  • 1
    If you look at the response from the yahoo server the required 'Access-Control-Allow-Origin' header is missing. So you'll need to use a proxy server to pull the data. This policy might have changed in 2017 around the time Verizon bought Yahoo. So earlier code examples are probably no longer valid. – Yogi Dec 01 '22 at 16:42

2 Answers2

-1

You Can't By the sounds of it

the API your trying to get have there own CORS Policy set which is not allowing you to make the request.

I hate to be the guy to point you to the docs. But here's the Docs.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

noremacsim
  • 59
  • 4
-1

The Yahoo page prohibits the request from external via CORS. CORS is a browser-based technology. In this case CORS prevents the information from being embedded in other webpages. Outside the browser, e.g. via curl, the page can be queried.

Siddi
  • 984
  • 10
  • 19