1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CORS problem, yahoo finance API

Discussion in 'JavaScript' started by iago111, Nov 4, 2020.

  1. #1
    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!
    SEMrush
    <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):
     
    Solved! View solution.
    iago111, Nov 4, 2020 IP
    SEMrush
  2. Efetobor Agbontaen

    Efetobor Agbontaen Active Member

    Messages:
    105
    Likes Received:
    32
    Best Answers:
    4
    Trophy Points:
    85
    #2
    Efetobor Agbontaen, Nov 6, 2020 IP
  3. iago111

    iago111 Member

    Messages:
    78
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    33
    #3
    Thanks Efetobor!
    But then I have to implement that API with PHP or node on my server, logically. Right!?
     
    iago111, Nov 7, 2020 IP
  4. #4
    Yes exactly!!
    What ever backend technology that works for you.
     
    Efetobor Agbontaen, Nov 7, 2020 IP
    iago111 likes this.
  5. iago111

    iago111 Member

    Messages:
    78
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    33
    #5
    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??
     
    iago111, Nov 23, 2020 IP
  6. Efetobor Agbontaen

    Efetobor Agbontaen Active Member

    Messages:
    105
    Likes Received:
    32
    Best Answers:
    4
    Trophy Points:
    85
    #6
    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.
     
    Efetobor Agbontaen, Nov 23, 2020 IP
  7. iago111

    iago111 Member

    Messages:
    78
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    33
    #7
    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.
     
    iago111, Nov 23, 2020 IP
  8. iago111

    iago111 Member

    Messages:
    78
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    33
    #8
    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.
     
    iago111, Nov 24, 2020 IP
  9. Efetobor Agbontaen

    Efetobor Agbontaen Active Member

    Messages:
    105
    Likes Received:
    32
    Best Answers:
    4
    Trophy Points:
    85
    #9
    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
     
    Efetobor Agbontaen, Nov 25, 2020 IP
  10. iago111

    iago111 Member

    Messages:
    78
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    33
    #10
    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?
     
    iago111, Nov 25, 2020 IP