Encountering a GitHub REST API CORS issue while attempting to fetch a public repository's git archive

I'm currently working on developing an Angular application that will be hosted on my GitHub pages using a custom verified domain.
Below is the code I am using to call the GitHub API in order to obtain the zip archive of one of my (public) repositories:

  public getTemplate() {
    return this.http.get(
      'https://api.github.com/repos/crystal-nest/cobweb-mod-template/zipball/1.20.4',
      {
        headers: {
          'X-GitHub-Api-Version': '2022-11-28'
        }
      }
    );
  }

I have verified that the URL is correct because when I paste it directly into my browser, the download process initiates successfully.
However, upon execution of the code, I encounter the following error message:

Access to XMLHttpRequest at 'https://codeload.github.com/Crystal-Nest/cobweb-mod-template/legacy.zip/refs/heads/1.20.4' (redirected from 'https://api.github.com/repos/crystal-nest/cobweb-mod-template/zipball/1.20.4') from origin 'https://crystalnest.it' 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.

To address this issue, I attempted to make JSONP requests as described here:

return this.http.jsonp('https://api.github.com/repos/crystal-nest/cobweb-mod-template/zipball/1.20.4', 'callback');

Unfortunately, this approach led to a different error:

{
    "headers": {
        "normalizedNames": {},
        "lazyUpdate": null,
        "headers": {}
    },
    "status": 0,
    "statusText": "JSONP Error",
    "url": "https://api.github.com/repos/crystal-nest/cobweb-mod-template/zipball/1.20.4?callback=ng_jsonp_callback_0",
    "ok": false,
    "name": "HttpErrorResponse",
    "message": "Http failure response for https://api.github.com/repos/crystal-nest/cobweb-mod-template/zipball/1.20.4?callback=ng_jsonp_callback_0: 0 JSONP Error",
    "error": {
        "message": "JSONP injected script did not invoke callback.",
        "stack": "Error: JSONP injected script did not invoke callback.\n    stacktrace omitted for the sake of brevity"
    }
}

You can find my code here, and view a live example here (simply click the download button and disregard everything else, as the website is still a work in progress).

On a side note: even if the retrieval of the file as an 'arraybuffer' were successful (the necessary data format for processing with JSZip), it remains inconvenient that the appended code in the zip name and its root directory are unpredictable. Ideally, I would prefer to use the following URL

https://github.com/crystal-nest/cobweb-mod-template/archive/refs/heads/1.20.4.zip
due to its predictable naming convention making processing easier.

Answer №1

It was raised on the GitHub community forum here that the current method to accomplish this task is through the utilization of a proxy server.
In my situation, I opted for this particular free and open proxy server.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for identifying when a div reaches the top or bottom of the browser window in Angular 4

This question has solutions available for JQuery (which I prefer not to use in the current project) and Angular1 (which I am unfamiliar with). ...

Having trouble loading AngularJS 2 router

I'm encountering an issue with my Angular 2 project. Directory : - project - dev - api - res - config - script - js - components - blog.components.js ...

A single click is required for Observables to load on an HTML page

While working on my Angular web application, I encountered an issue with displaying data when using Observables and Subjects. Typically, when searching the Firebase DB, I use *ngFor="let myvar of _myvar | async" in my HTML to display the retrieve ...

What makes FC function components stand out from traditional vanilla React function components?

I recently came across this FC function component: const LabelForm: FC<LabelFormProps> = ({ labels, selectedID, }) => { const selectedLabel = selectedID !== undefined && labels[selectedID]; In my usual implementation, I do it like t ...

Contrast in output between for and for..of loops demonstrated in an example

Here are two code snippets, one using a traditional for loop and the other using a for...of loop. export function reverseWordsWithTraditionalForLoop(words: string): string { const singleWords: string[] = words.split(' '); for (let i = 0; i &l ...

Converting a string date format to UTC: A step-by-step guide

In my Typescript code, I am trying to convert a date/time format from string to UTC format but currently facing an issue with it. The desired output is as follows: 2018/10/27+16:00 => 20181027T01000Z import * as moment from 'moment' dates=$ ...

Generating Legible JavaScript Code from TypeScript

I am looking to maintain the readability of my compiled JS code, similar to how I originally wrote it, in order to make debugging easier. However, the typescript compiler introduces several changes that I would like to disable. For instance: During compi ...

What is causing the malfunction in this overloaded function signature?

Encountering an issue when attempting to declare an overloading function type with a full type signature in TypeScript. For example: // Full type signatures for functions type CreateElement = { (tag : 'a') : HTMLAnchorElement, (tag ...

Adding extra fields to an existing JSON response in a TypeScript REST API

I am in need of an additional column to be added to my response data. Currently, I am fetching data from multiple REST endpoints one by one and merging the results into a single JSON format to display them in an Angular Mat table. The columns that I want t ...

Tips for effectively sharing custom validators across different modules

After creating a password validator based on a tutorial, I attempted to use it on multiple forms within different parts of my application. However, I encountered an error stating: Type PasswordValidator is part of the declarations of 2 modules: SignupMod ...

Creating dynamic buttons based on a list: A step-by-step guide

Is there a way to dynamically generate and display buttons based on the number of elements in a list? I currently have a hardcoded implementation, but sometimes my list only contains two elements (button 1 and button 2) so I don't need the additional ...

Unable to retrieve JSON data in Angular2 as expected

I am encountering an issue while attempting to retrieve data from a JSON file stored in my assets folder within Angular 2. The data is not displaying as expected despite my efforts. The JSON file I am trying to access is named: test.json [ "{'id ...

Is there a way for me to properly type the OAuthClient coming from googleapis?

Currently, I am developing a nodemailer app using Gmail OAuth2 in TypeScript. With the configuration options set to "noImplicitAny": true and "noImplicitReturns": true, I have to explicitly define return types. Here is a snippet of my code: import { goog ...

Unable to loop through the Array

let Users = [ { name: 'John', id: '1', jp: 'USA' }, { name: 'Jane', id: '2', jp: 'Japan' }, ]; export function DisplayUsers(usersList) { return ( <div> {usersList?.map((user ...

Getting to grips with the intricacies of the Gradle "task" syntax

I'm having trouble grasping the syntax of Gradle tasks. After following a tutorial, I created a build.gradle file for building Angular4/SpringBoots projects with Gradle. The build.gradle file includes several task blocks: // added our development b ...

The process of automatically formatting Typescript has transformed into an unfortunate auto-discarding action

Typescript autoformatting has become a concerning issue. Whenever I input quoted strings (" or `), the code surrounding it seems to temporarily glitch, with other strings appearing as code. This problem has recently escalated, particularly with strings li ...

Navigating VSCode for Correct Import Setup

My root app directory has a structure consisting of the following folders: /app/ /environments/ Within the /app/ folder, there is a file named Helper.ts located in the helpers/ subdirectory: /app/helper/Helper.ts Inside this file, I attempted to import ...

Angular encountered an issue while attempting to access the property 'results' of an undefined value

I've got the code functioning perfectly, but for some reason I'm not getting any errors in the console log. It seems like I can't access results from an indefinite property. Any ideas on what could be causing this issue? I'm trying to m ...

Using typescript, encountering an issue with dynamic import and json file integration

When creating a function to retrieve test data for multiple environments, I encountered an issue: export class DataHelper { public static async getTestData(fileName: string): Promise<any> { return await import(`../${fileName}`); } } Running ...

React router loader is not functioning correctly when trying to fetch data

My attempt to fetch an array of data from an API is resulting in an empty response within the application. However, when I try the same call in a swagger, it returns the correct array. HomePage.tsx: const HomePage = () => { const books = useLoaderDat ...