Errors When Running Local Zendesk App with zcli

Hi Zendesk Developer Community,
 

I am encountering multiple issues while trying to develop and test my Zendesk app locally using the Zendesk CLI (zcli). Here are the steps I've taken and the errors I'm experiencing:

Setup Details:

• Node Version: 16.14.0
• zcli Version: @zendesk/zcli/1.0.0-beta.42

• App Structure:

  new-zendesk-app
  ├── assets
  │   ├── app.js
  │   ├── iframe.html
  │   ├── logo-small.png
  │   ├── logo.png
  │   └── logo.svg
  ├── node_modules
  ├── package-lock.json
  ├── package.json
  ├── README.md
  ├── server.cert
  ├── server.js
  ├── server.key
  └── translations
     └── en.json

Current Issues:

1. CORS Error:
   1. When trying to run the app using zcli apps:server, I encounter CORS issues while making API requests to Zendesk. The error message is: Access to fetch at 'http://localhost:4567/app.json?locale=en-US&subdomain=linksquares' from origin 'https://linksquares.zendesk.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2. Error: Tried to show an iframe with a location that is neither absolute nor an asset:
   1. This error appears when I don't have the node server.js running.
   2. When I run node server.js along with zcli apps:server (two terminals), my app disappears from the side panel and shows: GET http://localhost:4567/app.json?locale=en-US&subdomain=linksquares 404 (Not Found)
3. Authorization Issue:
   1. I am trying to fetch the organization data using the following code in app.js: 

var settings = {
   url: `/api/v2/organizations/${organizationId}.json`,
   type: 'GET',
   contentType: 'application/json',
   headers: {
       'Authorization': 'Basic <base64-encoded-token>'
   },
   success: function(response) {
       var organization = response.organization;
       var customFieldValue = organization.organization_fields.industry;
       $('#customer-name').text(organization.name);
       $('#industry-value').text(customFieldValue);
   },
   error: function(response) {
       console.error('Error fetching organization data:', response);
   }
};
client.request(settings);

Any guidance on resolving these issues would be greatly appreciated! Specifically, I need help with:

• Pulling organization data that will populate in my app whenever a user is on a ticket
• Ensuring API calls work correctly during local testing.