I am working on fetching order data by using private app key and private app password in live shopify store. I am calling the particular api url using ajax , but it gives me CORS error. When i hit the same url in the browser then it works fine. Then why it does not work in my code and gives me CORS error.
Please suggest me why this happening and how can i fix it
Hi @john12345 ,
Is there a reason you’re trying to make this call using AJAX on the storefront? It’s going to be insecure exposing your credentials like that. I’d highly recommend making any calls from a server side app, or using an app proxy for any calls you want to make from the front-end. Check our documentation on app proxies here.
@Busfox Can you elaborate on how to do this?
I have a client for whom we need to get an active campaign email marketing sign up form into a shopify page.
Unfortunately I cannot see how I am supposed to setup an app proxy for them when it cleary states it needs to be a public app.
All I need to do is use the proxy to whitelist the url that the form sends to. Building anything more then that is unjustifiable to my client.
thanks in advance.
@agentlewis You can create a “public app” without listing it in the App Store. This is done from the Developer Portal (https://partners.shopify.com). It’s considered an “unlisted app”, but gives your store the functions like app proxy. With that said, it does take more effort to build the app and get it installed on your store.
@john12345 Using your private app credentials in a POST or GET url directly from your storefront is not a secure way to do it. If you do, anyone can inspect the code of your page and see clearly your username and password.
It’s my understanding that you need to have your app process the POST request (behind the scenes), then return the results to your storefront page.
@Busfox please correct me if this isn’t correct..
Example of POST on client/storefront page:
<!--partial code for POST request from storefront- this is not complete-->
fetch('https://www.yourstore.com/apps/createSomething', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Storefront-Access-Token':'your-storefront-token'
},
body: JSON.stringify({ someData, customerURL }), })
.then(function (res) {
return res.text();
})
Then – in your app behind the scenes – you do your API calls with your username:password. This example is using GraphQL…
<!-- partial code in app to process POST from storefront (this is creating and fetching customer metafields) -->
const apiKey = "api key";
const apiSecret = "api secret";
const createSomething = (someData, customerURL) => {
const metafieldquery = `mutation customerUpdate($input: CustomerInput!) {
customerUpdate(input: $input) {
customer {
id
metafields (first:10, namespace:"mynamespace") {
edges {
node {
id
namespace
key
value
}
}
}
}
}
}`;
const input = {
"id": customerURL,
"metafields": {
"namespace": "mynamespace",
"key": "mykey",
"value": someData,
"valueType": "STRING"
}
};
const params = {
query: metafieldquery,
variables: { input }
}
const optionsMetafields = {
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(params)
};
const url = 'https://' + apiKey + ':' + apiSecret + '@' + shopUrl + '/admin/api/2019-07/graphql.json'
console.log(url) //used to see if URL is correct
fetch(url, optionsMetafields)
.then(res => res.json())
.then(response => {
console.log(JSON.stringify(response, null, 4))
});
}
Hope this help…
Hi @gdavisdesign , thanks for replying!
Indeed you are correct that the expectation is that the credentials will be held in your custom app. A lot of systems talk about these being api-proxies. eg airtable.
In this case I am using an active campaign form embed - widget. that needs to go through a proxy for slightly different reasons - ie it doesn’t have credentials that we are concerned about. It is a domain origin issue as I understand it. ie the form is posting the data to a non shopify.com web address. You can see my logic that a proxy would work in this situation as well.
Lastly regarding creating an unlisted public app - I’m not sure how to do that. The only action I can see in my partner portal is to list it on the shopify app store or install it on a development store.
I ended up creating a longer form post about this as I didn’t want to hijack this thread with my issue: Working solution that replaces private app url proxies?
Oh, I’m sorry – I’m looking at it wrong. I have a development store I’m working with, so I will run into this issue, too, when it goes live. I think (from reading this post) the app would still need to go through the approval process to work on live stores…
see this post–
OMG it worked! why couldn’t they put the documentation for that right in the partner portal.
I have managed to install the app now using this step - still feels so hacky to me. I think there used to just be a button to initiate the process from the partner portal…
I am just testing it - but I expect it will work just fine - thanks so much @gdavisdesign
D
Cool! So for your live store (not dev), it installs fine? Were you following the directions from the other post?
Yes exactly - installs fine 
But I can’t tell you if it will work properly for your needs - I assume it will. I think installation was the issue. And there are still many apps that are installed this way. eg intercom
