API Fetch datas in Javascript - CORS

delvauxodelvauxo Member Posts: 5

Hi,

Before posting here, I browsed the forum and was surprised that I don’t found at least one example of it. (even in documentation)


Store : https://check-out.webshopapp.com/


I just would love to retrieve all data’s products with Fetch() or XMLHttpRequest() using Javascript.

Code :


<script>
 const url = 'https://api.webshopapp.com/us/products.json';
 const myImage = document.getElementById('ajax-demo');

 var encoded = window.btoa('api_key:api_secret');
 var auth = 'Basic ' + encoded;

 var myHeaders = new Headers();
 myHeaders.append('Authorization', auth);
 myHeaders.append('Access-Control-Allow-Origin', '*');
 // myHeaders.append('Access-Control-Allow-Origin', 'https://check-out.webshopapp.com');
 // myHeaders.append('Accept', 'application/json');
 // myHeaders.append('Cross-Origin-Resource-Policy', 'cross-origin');
 // myHeaders.append("Cookie", "__cfduid=d18427be2cce8a7c719b619b7197b01461615994171");

 // Display header's value.
 for (var value of myHeaders.values()) {
   console.log(value);
 }

 var myInit = { headers: myHeaders,
         method: 'GET',
         // mode: "cors",
         credentials: "include"
 };

 var myRequest = new Request(url,myInit);
  
 fetch(myRequest,myInit).then(function(response) {
   console.log(response);
   if(response.ok) {
     response.json().then(function(data) {
       // Do something.
       console.log(data.products);
       if (data.products.image) {
         myImage.src = data.products.image.src;
         console.log(myImage);
       }
     });
   } else {
   console.log('Network error.');
   }
 })
 .catch(function(error) {
  console.log('Fetch operation failed: ' + error.message);
 })
</script>


Console debug messages :

 1 - Access to fetch at 'https://api.webshopapp.com/us/products.json' from origin 'https://check-out.webshopapp.com' 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.

 2 - GET https://api.webshopapp.com/us/products.json net::ERR_FAILED
     (anonymous) @ (index):1187


Network > Headers (in Chrome) :

GENERAL
Request URL: https://api.webshopapp.com/us/products.json
Referrer Policy: strict-origin-when-cross-origin

REQUESTED HEADERS
Provisional headers are shown
access-control-allow-origin: *
authorization: Basic YmVkN2FiZGYzMDFiZGMwM2FkMDMzZjE4MzFjYWVlNWQ6NzM0MzNiZTRiNzBhMThkNWRjMzQwODZkMmIyNDJmODI=
Referer: https://check-out.webshopapp.com/
sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36


I tried with commented code as well. But 401/405 errors…


I put this code inside Web extras > Custom JS in admin settings.

Where am I wrong ? Because I feel like I followed all given instructions in the doc and usually with other APIs it works…

What is the best or simplest way to get datas in Javascript from your API ?


Thanks in advance for your help.

5 comments

  • delvauxodelvauxo Member Posts: 5

    I forgot to mention that I don't use any blocker (adblocks) or extensions with chrome.

    When I use Postman I can reach the datas.

  • gregaricangregarican Member Posts: 908 

    Will this work in a different browser, such as Firefox? When I see the header value of

    Referrer Policy: strict-origin-when-cross-origin
    

    that's automatically set in your request then I'm thinking that's what's causing the issue. Strict means that although both resources are in the webshopapp.com domain, they are two different subdomains. So either Lightspeed E-com is denying the request within their own containing page, or else Chrome is being difficult.

  • delvauxodelvauxo Member Posts: 5
    edited March 2021

    Thanks for your answer.

    Referrer Policy: no-referrer-when-downgrade
    


    Post edited by delvauxo on
  • delvauxodelvauxo Member Posts: 5

    When I try with Firefox and look at the call status

    Firefox show me a 405 error.

    And when i go to their doc, here is what I found :


    405 Method Not Allowed

    The HyperText Transfer Protocol (HTTP) 405 Method Not Allowed response status code indicates that the request method is known by the server but is not supported by the target resource.

    The server MUST generate an Allow header field in a 405 response containing a list of the target resource's currently supported methods.


    Can I modify server's headers ?

  • delvauxodelvauxo Member Posts: 5

    Javascript returned an HTTP 0 error. One common reason this might happen is that you requested a cross-domain resource from a server that did not include the appropriate CORS headers in the response.

    Is it possible ?

Sign In or Register to comment.