Making a cross-origin request to an external API using the HTTPS protocol

Trying to fetch JSON data from this URL:

Despite attempting CORS, the request failed. Below is the code I used based on a template:

function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    xhr = null;
  }
  return xhr;
}

function getTitle(text) {
  return text.match('<title>(.*)?</title>')[1];
}

function makeCorsRequest() {
  var url = 'https://shopicruit.myshopify.com/admin/orders.json?page=1&access_token=c32313df0d0ef512ca64d5b336a0d7c6';

  var xhr = createCORSRequest('GET', url);
  if (!xhr) {
    alert('CORS not supported');
    return;
  }

  xhr.onload = function () {
    var text = xhr.responseText;
    console.log("success");
  };

  xhr.onerror = function () {
    alert('Woops, there was an error making the request.');
  };

  xhr.send();
}
makeCorsRequest();

Encountering this error message:

XMLHttpRequest cannot load >?>page=1&access_token=c32313df0d0ef512ca64d5b336a0d7c6. No 'Access-Control->Allow-Origin' header is present on the requested resource. Origin 'null' >is therefore not allowed access.

Also attempted using JSONP without success.

Appreciate any assistance or insights!

Answer №1

The issue arises due to XMLHTTPRequest causing CORS problems. It is recommended that the XMLHTTPRequest call be directed to the same domain from the browser.

In order to access from all domains, it is necessary for them to implement the Access-Control-Allow-Origin : * header in the response.

If not, you have the option of using your server as a proxy.

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

Real-time webpage featuring dynamically updating text sourced from a file

After spending 5 hours attempting this on my own, I've decided to reach out for help. I am in need of creating a page that will automatically update itself and display the content of a file when it changes. For example, let's say we have a file ...

Using Ajax and PHP, Select2 can automatically populate a second field based on the multiple selections made in the first field

Is there a way to make this work? I have a primary multiple select option field (parentfield) and I want to populate a secondary one (childfield) based on the values selected in the first. <select id="parentfield" name="parentfield[]" multiple> ...

The JWT authentication appears to be functioning properly when tested on "postman," however, it is encountering issues on the website

When I attempt to verify a user's authentication using tools such as "Postman" or "Insomnia," everything functions correctly (when I set the bearer). However, when I try to log in through the website, I encounter an error here: function authenticateT ...

Guide to changing a promise into a float using protractor

Currently, I am developing end-to-end tests with protractor and I need to verify the accuracy of certain calculated values on a page. It seems like a straightforward task: var variable1 = element(by.binding('variable1')); var variable2 = element ...

Guide on sending a message to a specific channel using Discord.js version 13 with TypeScript

After recently diving into TypeScript and seeing that Discord.js has made the move to v13, I have encountered an issue with sending messages to a specific channel using a Channel ID. Below is the code snippet I am currently using: // Define Channel ID cons ...

npm Error: The installation script for [email protected] has encountered a failure

I encountered an error while attempting to execute "ionic start MyApp" in the Windows terminal. This is a new machine and I have already reinstalled nodejs and ionic, but the same error persists. Can someone lend a hand? npm WARN tar invalid entry & ...

Organize information from JSON data into a structured format

I'm having difficulty formatting the grouped JSON data I obtained. Here is my array of objects: arr = [ { "date": "2020-01-01", "metric": 32, "type": "Google" }, { ...

What is the reason for the JSON Structure always displaying a numeric key first?

(The Challenge of Updating JSON Structure based on User Interaction) Utilizing Angular Typescript, I dynamically create a JSON structure that reflects user interactions within certain components. Process Overview The initial default setting for the J ...

Three.js: Exploring geometric shapes through different perspectives

I'm looking to create an image using various geometric shapes, but I want them all to be visible from the same perspective. Essentially, I don't need a true 3D scene, but rather a collection of individual shape images placed together. Is there a ...

What is the best way to convert a JSON string from a specific array into an array object?

JSON object: { "data": { "myStatus": "[1 2 21 0 50 0 0 0],[2 1 3 1 50 0 0 0]" }, "success": true } Upon converting to the JSON object, it appears that the myStatus is being treated as a string. The goal is to parse it as an Array inst ...

Turkish text is not appearing correctly on the UIWebview when embedded in HTML

One of the challenges I encountered in my iOS project involved programming a UIWebView to load content in both English and Turkish from a web service. To accomplish this, I formatted the HTML string with the necessary headers and saved it locally before pr ...

Strange Interaction with Nested Divs in CSS Layouts

I am working on a webpage layout and currently it looks like this: https://i.sstatic.net/s4TOb.jpg I am trying to align the purple box inline with the pink box inside the yellow box, which is inside the green box. However, when I change the display proper ...

There seems to be an issue with the bootstrap datepicker as it is throwing an error stating that $(

Currently in the process of developing a web application using AngularJS with MVC, I have integrated Bootstrap's datepicker into my project, Here is the code snippet: <div class="container"> <div class="row"> <div class=& ...

When calling a function within a for loop, the function receives the final value instead of iterating through the sequence

I need assistance with setting unique names for objects in an array. I have the following setup: this.array = [{name: null}, {name: null}, {name: null}] Along with a list of reserved names: this.reserved = ["name2", "name3"] My goal is to loop through th ...

Express throwing module errors

I encountered an issue while attempting to expose a REST service in an electron app using expressJS. Following a tutorial, I added express and @types/express to the project. However, when trying to implement a "get" method and running the build with ng bui ...

The PDF file received after using Express.js sendFile() appears to be corrupted and unreadable

In the process I am currently working on, a POST request is sent from the client to the server, and the server generates a PDF file which is then returned for download. Although the server successfully generates the PDF, it appears corrupted (white empty p ...

Initiating Internet Explorer using the APTool application for Selenium automation

Have you ever encountered a situation where you needed to open Internet Explorer from the start menu with the right-click option open with *apptool and then navigate to a specific webpage? I wonder, is it possible to automate this process using Selenium W ...

Exploring the functionalities of Ajax and HTML5 history states in relation to back button behavior

There have been numerous inquiries regarding the functionality of pushState in HTML5, but I'm encountering two specific issues for which I haven't found any solutions. My popstate handler is defined as follows: $(window).bind('popstate&apos ...

Using Jquery to Iterate Over Data

Is there a way to iterate through the JSON data string below using jQuery? Would it be appropriate to use $.getJSON function for this task? jQuery17209521235961001366_1380903443191({"type":"result","rid":"hopkinsa","data": [[{"artist":"NAME1","title":"SON ...

When attempting to integrate Angular 1.4's new router with components, an issue arises where a warning is triggered stating, "Failed to instantiate controller HeadlinesController

Attempting to work with Angular for the first time and struggling to load a component using data from an http request. Currently encountering a warning when attempting to execute the code with the HTTP request. Receiving a "Could not instantiate control ...