How to get JSON from external site into my Shopify site, using Jquery $.ajax() CORS error

Solved
New Member
3 0 0

I am trying to use $.ajax() to get data from a JSON file which is hosted on an external website to display an instagram feed on the homepage of a Shopify store I am working on, The feed is from Instagram / FB graph API. This is all working perfectly. I have a cron job on my server which makes a request once per hour and the data from instagram is written into a file on my server which I want to access from my Shopify site.

Now I just need to basically read the external JSON file from my Shopify site which is causing this error: "Access to XMLHttpRequest at 'https://example.com/instagram/data.json' from origin 'https://example.myshopify.com' has been blocked by CORS policy. 

After some research on this forum, correct me if I am wrong but I have read that there is no way to prevent the CORS error unless using a public app / App Proxy to get the data, so I have created a public app from my partner account , the app settings are:

App Name: Instagram feed
App URL: https://example.myshopify.com
Whitelisted redirection URL(s): https://example.myshopify.com


the settings for App proxy set to 
Subpath prefix: apps
Subpath: instagram
Proxy URL: https://example.com/instagram/


I have tried installing this app to a development store (the Shopify site that I want the feed to appear on), but when I try to install it , it just redirects to https://example.myshopify.com and then nothing happens, if I go to the url where I expect the data to appear I just get 404 (https://example.myshopify.com/apps/instagram/data.json)

 

So I just need to know the fastest way to access the JSON data from my Shopify site with or without using a public app / app proxy. I dont need to access any of the store data , or anything just need to get a basic data feed from an external JSON file.

cheers thanx,

 

 

0 Likes
Highlighted

Success.

Shopify Expert
9852 97 1613

You can pull json data from another server. I've built things like it many times. Lots of apps do this (without a proxy).

Eg.

var r = new XMLHttpRequest();
r.onreadystatechange = function(){
	// do something
r.open("GET", url, true);
r.send();

Here's some random .json file I found online that you could use in the place of "url". Or maybe just replace your current url with that one. If you don't get the CORS error you know the issue is with where the json is coming from.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
3 0 0

I managed to get this to work, the problem I was having was with Cross-Origin Resource Sharing (CORS). basically the problem was with the source for the data, so I had to log into the server where the data is hosted and put a header ( I have done it in Plesk) but might be different for your server, example: 

 

Additional headers:

 

Access-Control-Allow-Origin : "example.com"

 

 

0 Likes
Highlighted
Shopify Partner
5 0 0

I'm getting a CORS error when attempting to access an external API endpoint using the same and a similar method as follows:

<script>
      var data = {};
      jQuery.ajax({
        type: 'GET',
        url: 'https://somewebsite.com/api/prices',
        data: data,
        dataType: 'json',
        success: function(data) { 
          console.log(data);
        }
      });
    </script>

I'm simply trying to GET JSON data to populate on the frontend of a client's store. Any ideas?

0 Likes