Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

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

Solved

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

chrislpip
Visitor
3 0 1

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,

 

 

Accepted Solution (1)

Jason
Shopify Partner
11206 226 2314

This is an accepted solution.

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.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★

View solution in original post

Replies 3 (3)

Jason
Shopify Partner
11206 226 2314

This is an accepted solution.

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.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
chrislpip
Visitor
3 0 1

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"

 

 

luckysump
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?