CORS problem, yahoo finance API

Hi guys,

I'm about to test the yahoo Finance API at home! (Yes I do this at home!)
I copied that script from rapidAPI and added cors-anywhere- proxy. However this does not work.
The yahoo expert said, quote: "I suggest that you wrap it in your own endpoint and call the endpoint later." What's the endpoint?

Thanks a million!

<script>
  const data = null;

  const xhr = new XMLHttpRequest();
  xhr.withCredentials = true;

  xhr.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {
      console.log(this.responseText);
    }
  });

  let url = "https://rapidapi.p.rapidapi.com/stock/v2/get-chart?interval=5m&symbol=GBPEUR&range=1mo&region=US";

  const proxy = encodeURI("https://cors-anywhere.herokuapp.com/");

  xhr.open(
    "GET",proxy+url,true
   
  );
  xhr.setRequestHeader(
    "x-rapidapi-key",
    "3bd27a6483mshfb828731a7d4629p1e345fjsn59f338bdbd1f"
  );
  xhr.setRequestHeader(
    "x-rapidapi-host",
    "apidojo-yahoo-finance-v1.p.rapidapi.com"
  );

  xhr.send(data);
</script>

Code (JavaScript):

 

I think what he means is that you should create an API on your own domain. The API should be the one to call this:
let url = "https://rapidapi.p.rapidapi.com/stock/v2/get-chart?interval=5m&symbol=GBPEUR&range=1mo&region=US"; and return the response to you.

That way, you will not have any CORS issue if you are making the request to your own domain.

 

Thanks Efetobor!
But then I have to implement that API with PHP or node on my server, logically. Right!?

 

Yes exactly!!
What ever backend technology that works for you.

 

Sorry, I still don't get how this should work. I can fetch data for my sever from the server that provides the API. Fine! However, if I work with AJAX I send lots of requests to update my data on the frontend. So I must access my server using JS. That server must access the API server and backwards. I cannot imagine that this is usually implemented like this??

 

It depends on how you want to implement it. How frequently will you query the API?

If it's as frequent 1 request / 2 minutes, then you can do something like this:
Send Ajax Request to your API
Your API sends HTTP Request to Yahoo, get's a response and send it back to the original Ajax request.

Server to server communications are usually very fast. Actually, a lot of Apps and Huge companies do server to server requests for a single request.

If you make this request multiple times in a minute, then consider using Websockets instead of Ajax.

You will have a cronjob to query the API every minute and as soon as there is a response, it sends it down to the socket connection.

Multiple Ajax requests per minute can drain data and battery.

 

I want to focus on the frontend, I'm doing a lot with vue.js currently (for SPAs). Perhaps I can trigger the AJAX requests every 2minutes, but I don't think so!?

Let's take a look at a practical example... I enter booking.com in the status bar and press F-12.

THEN:
XHR:
Request URL: https://cdn.cookielaw.org/consent/3...b31/3ea94870-d4b1-483a-b1d2-faf1d982bb31.json
Request Method: GET
Status Code: 200

Request URL: https://cdn.cookielaw.org/consent/3...745995-04f8-44ca-a6ff-f90c2d275998/en-us.json
Request Method: GET
Status Code: 200

Request URL: https://cdn.cookielaw.org/scripttemplates/6.5.0/assets/otFlat.json
Request Method: GET
Status Code: 200

Request URL: https://cdn.cookielaw.org/scripttemplates/6.5.0/assets/otPcTab.json
Request Method: GET
Status Code: 200

Request URL: https://www.booking.com/js_tracking...jTrO3EMCnCTcq9Q5_Bsu-3c56RjcIsx-Va-YSfxE_yOqA
Request Method: GET
Status Code: 200 OK

Request URL:https://www.booking.com/gethandpick...al&soz=1&lang_click=top&cdl=fr&lang_changed=1
Request Method: POST
Status Code: 200 OK

Request URL: https://collector-pxikkul2rm.perimeterx.net/api/v1/collector
Request Method: POST
Status Code: 200

.....

It says 20/106 requests.

 

I think I got it roughly, of course a booking server has the same origin and they do this
cronjob stuff on the backend.

But coming back to the yahoo Finance API. The server controls CORS of course.
I can access the API data when the yahoo server sends back s.th. like: Access-Control-Allow-Origin:*

Obviously, they don't do this. But then, why do they offer JS API code
for the front-end when they don't allow CORS anyway.

 

I have never used Yahoo Finance API before but from the little Google Search I've done, it looks like Yahoo does not even have an official Finance API. And the APIs are from a 3rd Party RapidAPI.

Secondly, even if they did, a JS API could also mean they expect you to use Node from the backend like a lot of other companies. No one expects you to "Announce" your API KEYs in FrontEnd Javascript to any developer that cares to look.

Also APIs that actually allow Frontend Integrations are usually SDKs and most of the times they use iframes

 

YahooFinane by RapidAPI, right:

accessing the API via JS should be possible like that:

JS (fetch):

fetch("https://apidojo-yahoo-finance-v1.p.rapidapi.com/auto-complete?q=tesla&region=US", {
    "method": "GET",
    "headers": {
        "x-rapidapi-key": "1234",
        "x-rapidapi-host": "apidojo-yahoo-finance-v1.p.rapidapi.com"
    }
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.error(err);
});

Code (JavaScript):

jQuery:

const settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://apidojo-yahoo-finance-v1.p.rapidapi.com/auto-complete?q=tesla&region=US",
    "method": "GET",
    "headers": {
        "x-rapidapi-key": "1234",
        "x-rapidapi-host": "apidojo-yahoo-finance-v1.p.rapidapi.com"
    }
};

$.ajax(settings).done(function (response) {
    console.log(response);
});

Code (JavaScript):

xhr:

const data = null;

const xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {
        console.log(this.responseText);
    }
});

xhr.open("GET", "https://apidojo-yahoo-finance-v1.p.rapidapi.com/auto-complete?q=tesla&region=US");
xhr.setRequestHeader("x-rapidapi-key", "1234");
xhr.setRequestHeader("x-rapidapi-host", "apidojo-yahoo-finance-v1.p.rapidapi.com");

xhr.send(data);

Code (JavaScript):

Why the hustle with GET request anyway?