Is it possible to retrieve pure JSON data without making any changes to the server through a cross-domain request?

I am trying to download data from a specific URL within a web page (specifically, a Google API). The issue is that the API only returns JSON data and I need to use "jsonp" for cross-domain access. However, when making a "jsonp" request, I encounter an error: "Uncaught SyntaxError: Unexpected token :".

While I could set up a backend server as a proxy, I'm wondering if there is a client-side solution to this problem. Any ideas?

Answer №1

When data is made public and Google has enabled CORS on their servers through the Access-Control-Allow-Origin: * header, a simple HTTP request using the XMLHttpRequest object is all that is needed.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.google.com/some.json');

xhr.onload = function(e) {
  var data = JSON.parse(this.response);
  console.log(data);
}

xhr.send(null);


In case the above example fails, it suggests that the data is not public and requires some form of authentication, such as OAuth2. In this scenario, utilizing the provided (backend) libraries for OAuth would be more convenient.

To delve deeper into CORS, you can explore these resources:

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

Securing Communication in RESTful Web Services

Looking to enhance the security of my REST web services with a two-level approach. Securing the Transport Layer To ensure secure point-to-point communication, I have decided to implement HTTPS protocol. Encrypting Data at the Message Layer In order ...

Stunning Opening and Closing Animation with Ajax

Looking for help with creating an animation like the one shown here: Incorporating this into my current site at: dageniusmarketer.com/DigitalWonderland/ I want the window displaying text content to open and close as users navigate through the links, ess ...

Click on a specific image in a table using Cypress with a specific source URL

I need help with a query for Cypress regarding a table of items, each item having active (blue) and not active (black) images. How can I set up this query? Below is an image of the table list: https://i.stack.imgur.com/74qzb.png And here is the HTML code ...

Is there a way to exit PHP code automatically after a set time?

Is there a way to end my PHP code execution after 10 seconds? I've come across this piece of code, but it doesn't seem to work. set_time_limit(10); // This line is restricted by the server ini_set('max_execution_time', 10); ...

Generating a highchart by retrieving JSON data using AJAX

I'm currently working on generating a basic chart on a webpage using data from a MySQL database that is fetched via a MySQL script. My main challenge lies in understanding how to combine the ajax call with the necessary data for the chart. I'm n ...

Learn the process of developing a web client application using Node.js and NPM similar to the AngularJS tutorial

I am new to nodejs, npm and angularjs. I recently explored the angularjs tutorial project available at https://github.com/angular/angular-phonecat.git. This project has been really interesting for me as it demonstrates how easy it is to manage modules wi ...

What is the best way to display the outcome of an AJAX call in a pop-up window?

I have some information stored on the server that I want to display in a dialog box. The code I am attempting to use is as follows: $(function() { $("#checkreservatoion").click(function() { // getting selected date var selected_date = ...

Is the && operator being utilized as a conditional statement?

While following a tutorial, I came across this code snippet that uses the 'and' operator in an unusual way. Is this related to React? Can someone provide an explanation or share documentation that clarifies it? {basket?.length > 0 && ...

When using Selenium and C# to scrape an Angular website, the result is the Angular script rather than the fully rendered web page

It appears that Selenium is only able to see the HTML that is initially loaded on a webpage, not any changes or updates made after. This behavior has been consistent across different browsers like IE, Chrome, and PhantomJS. Even the built-in Chrome debugge ...

Pass along a JSON array from Express to Angular2

I have been working on sending a custom array filled with mongoose errors, and I am successfully creating the array. Below is the code snippet: student.save(function(err, student) { if(err) var errors = []; for (field in err.errors) { ...

What is the best way to delete a specific date from local storage using Angular after saving it with a key

I'm attempting to clear the fields in my object (collectionFilter) from local storage using localStorage.removeItem('collectionFilter'). All fields are removed, except for the date fields. Please note that I am new to JavaScript and Angular. ...

Having difficulty retrieving textbox value through ajax within a php function

There is a text box for weight input where the user can enter the weight and then click a button. Here's the HTML code snippet: <tr> <td> <?php echo "Weight:"; ?> </td> <td> <span class=&ap ...

Firebase Firestore is returning the dreaded [object Object] rather than the expected plain object

I've created a custom hook called useDocument.js that retrieves data from a firestore collection using a specific ID. However, I'm encountering an issue where it returns [object Object] instead of a plain object. When I attempt to access the nam ...

Guide to switching classes with jquery

On my webpage, I have a star rating system that I want to toggle between "fa fa-star" and "fa fa-star checked" classes. I found some information on how to do this here: Javascript/Jquery to change class onclick? However, when I tried to implement it, it di ...

Exploring the Unpredictable Results of Recursive Functions in JavaScript

Take a look at this recursive code snippet. function calculateFactorial(n) { if (n === 0 || n === 1) { return 1; } else { console.log(calculateFactorial( (n - 1) )); return n * calculateFactorial(n - 1); } } const num = ...

Connect Angular Elements with Polymer 1.0

I have a unique custom element: <my-element options='{{myOptions}}'></my-element> When using this, the ready callback in the web component only receives {{myOptions}} for the options property. Despite trying various tools, none seem ...

The declaration for "Control" is not present, possibly being restricted by its protection level

I'm really struggling to get the jQuery datepicker working in ASP.NET. I've tried various examples, but nothing seems to work for me. Even though I'm fairly new to ASP.NET, I am learning quickly! Here is the script I am trying to use: < ...

Guidelines for updating state in React following a delay?

Trying my hand at creating a basic roulette wheel using React, I encountered an issue where setting the state spinning to false at the end of the function did not seem to have any effect. import React, { useState } from "react"; const numbers = ...

Choose the parent element along with its sibling elements

How can I target not only an element's siblings but also its parent itself? The .parent().siblings() method does not include the original element's parent in the selection. $(this).parent().addClass("active").siblings().removeClass("active"); I ...

Tips for obtaining response headers

Currently, I am utilizing Angular version 15.0 and retrieving a list of items from the backend (ASP.NET Core 5) with an additional item attached to the header. The GET method in the client-side service is as follows: /** GET Paged commodities from the s ...