Issue with making Flickr API request using XMLHttpRequest receiving an unsuccessful response

I'm having issues trying to retrieve a JSON list from Flickr using plain JavaScript and XMLHttpRequest. Here is an example of an AJAX call without a callback function that is not functioning properly:

var url = "https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&nojsoncallback=1";

xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    console.log(xhr.status);
  console.log(xhr.readyState);
    if (xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);  
    }else {
       console.log("error"); 
    }
}
xhr.open("GET", url)
xhr.send();

The error message I'm encountering is -

js:1 Access to XMLHttpRequest at 'https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&nojsoncallback=1' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Can anyone help me identify where the issue lies?

Answer №1

The Flickr API does not support Cross-Origin Resource Sharing (CORS). This means that you cannot access it directly from JavaScript embedded in a webpage on a different origin without using the JSONP API.

Flickr does offer an XML version (simply remove format=json&callback=? from the URL) and a standard JSON version (use format=json&nojsoncallback=1). However, without CORS permission granted by Flickr, direct access is not possible. One solution would be to use a proxy server located on the same origin as your webpage or one that adds CORS headers to the response.


No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null.jsbin.com'; is therefore not allowed access. But why am I not getting the same error with getJSON?

This is because jQuery utilizes the JSONP technique instead of XMLHttpRequest when callback=? is included in the URL.

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

What could be causing my vis.js network's node hover popups to not function properly?

I've encountered an issue where, despite adding the 'title' property to my node objects, the pop up window with the title content doesn't appear when I hover over a node. Here are the options I've chosen and how I've set up m ...

Tips on retrieving data in AJAX from various fields upon button click

Description: I am looking to implement functionality where a user clicks on a button within a while loop to trigger an AJAX call that retrieves and sends the value of both the button and an input field to PHP. If there are any issues in my code, please ...

Looking for guidance on sending data from a JS file to HTML using Nodejs? Seeking advice on various modules to achieve this task effectively? Let's

Looking for advice on the most effective method to transfer data from a JS file (retrieved from an sqlite db) to an HTML file in order to showcase it in a searchable table. My platform of choice is NodeJS. As a beginner, I am willing to put in extra time a ...

Collecting all Material-UI components into a single document

Currently, I am engaged in a Meteor project that utilizes Material UI and ReactJS. I wish to streamline the process by creating a single file that imports all necessary Material UI components for my project. This way, instead of adding individual exports ...

Issues with Firebase-admin preventing writing to the database are occurring without any error messages being displayed

Issues with Firebase admin writing to the database. The database is instantiated as follows: var db = admin.database(); A reference to the desired table is then set up: var systemsRef = db.ref("systems/"); A function is created to check if a 'sys ...

[entity: undefined prototype] { type: 'clip', info: 'Watch my latest video!!' } using nodejs - multer

import routes from "./routes"; import multer from "multer"; const multerVideo = multer({ dest: "videos/" }); export const localsMiddleware = (req, res, next) => { res.locals.siteName = "Webtube"; res.locals.routes = routes; res.locals.user = { isA ...

jQuery Animation Issue: SlideDown Effect Not Working as Expected

I'm feeling quite confused about this situation. I've been attempting to utilize the slideDown function in jQuery, but when I click on the 'information' div, it just jumps instead of animating smoothly. I suspect that one of the cause ...

Decipher the JSON code to modify the data

I have a JSON array below. {"entries":[{"uid":155551338258538,"photo":"https:\/\/m.ak.fbcdn.net\/profile.ak\/hprofile-ak-prn1\/323887_155551338258538_1152153357_q.jpg","type":"user","text":"shikhadamodar","path":"\/shikha.dam ...

An unknown property exception was thrown due to the field name being unrecognized: "Symbol"

Seeking assistance with parsing JSON data from AlphaVantage using Jackson and Ebeans. { "Symbol": "IBM", "AssetType": "Common Stock", "Name": "International Business Machines Corporation", ... more details } Below is the code snippet I am usin ...

What is the correct way to transform a list of lists into JSON using Python?

Recently, I encountered an issue with converting a list of lists with strings containing double quotes into JSON in Python. Here is the scenario: new_row = [['<a href=/account_dtls/risks/edit/ACC-RISK-136053>ACC-RISK-136053</a>', &apo ...

Set a value to a slice of a struct that is empty

I am working with a slice of structs to store data retrieved from the database. The struct I am using looks like this: type TempGigs struct { Id int `json:"id" db:"id"` Title string `json:"title" ...

The checkbox that is dynamically added within a jQuerymobile list view is experiencing rendering issues

Having trouble with rendering dynamically added checkboxes inside a jQuerymobile list view. Here is the unordered list I am working with, including a sample list item in the HTML: <ul data-role="listview" id="ul_address_list" > <li data-icon=" ...

What happens to the arrays within my function?

I am working on a controller code: public function getChartData(){ $result["categories"] = array(); $result["series"] = array(); $sales = $this->db->Execute("select id_tenant, nama_kantin, count(id_penjualan) as jumlah_penjualan, s ...

I'm facing an issue where the data I retrieved is not displaying properly in my template within nuxt 3

After fetching data from an api, I can see it logged in my async function. However, the data stored in my array is not rendering on my template in Nuxt 3 The script setup includes: //ARRAY OF ALL THE DAILY WEATHER DATA PER DAY let allDataWeather=[]; ( ...

Currently focused on developing vertical sliders that can be manipulated by dragging them up or down independently

https://i.stack.imgur.com/NgOKs.jpg# I am currently working on vertical sliders that require dragging up and down individually. However, when I pull on the first slider, all sliders move together. The resetAllSliders button should also work independently, ...

What is the best way to retrieve the value of an UL LI element using jQuery

I'm struggling to retrieve the value of a ul li listbox in a function, and I can't seem to figure out how. Here is my code: <ul class="dropdown-menu" id="newloc"> <?php $res_add = DB::table('res_br')-& ...

When using addClass("test"), it throws an error message: TypeError: undefined is not a function

Upon examination in the console, I discovered the following: $(".myCssClass")[0].parentNode <li><span class="myCssClass">some text</span></li> I am attempting to add a CSS class to the parent span tag within the <li> element ...

Swapping the image source using a Vue dropdown menu

Recently I started using Vue and decided to implement a dropdown menu component (). The component pulls its list items from a JSON array structured as follows: <template> <div id="app"> <div id='container'> ...

What HTTP header is typically used in requests made by JavaScript libraries?

When utilizing the Prototype JavaScript framework, I noticed that Ajax requests include a header known as X-Requested-With. Are other JavaScript libraries such as jQuery, dojo, and YUI also including headers in their Ajax requests? Is this header always n ...

Discovering insights from JSON files in Data Lake Gen 2 using Azure Data Factory

Currently, I have an ADF pipeline that loads raw log data in the form of JSON files into a Data Lake Gen 2 container. Our objective now is to extract valuable information from these JSON files. My aim is to discover the most efficient method for extractin ...