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?

javascriptjsonajaxxmlhttprequestflickr

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

Learn the process of converting Null values to empty strings within a chain of functions when manipulating a database

Currently, I am utilizing the lodash library and have the following code in place: data: _(responseData.data) .pick(['title', 'layout', 'slug', 'author', 'seo', 'css', 'js']) ...

javascriptarraysvue.jslodash

String includes another String not refreshing automatically

How come myCtrl.greeting doesn't automatically update when I change myCtrl.name? angular.module('MyApp', []) .controller('MainController', [function(){ var mCtrl = this; mCtrl.name = ''; mCt ...

javascriptangularjs

How to utilize variables in Angular module functions?

My experience with Angular is fairly new, and I recently encountered a debugging issue in my application that unfolded like this: Imagine I am adding a new directive to an existing module defined in another .js file. When I tried using the syntax below: ...

javascriptangularjs

Unable to assign a local variable in Jquery .ajax() function to a global variable

Check out this example of a jQuery AJAX code: $(document).ready(function() { var custom_array = new Array(); $.ajax({ url: 'data.json', type: 'get', dataType: 'json', success: function(response) { $ ...

javascriptjqueryajax

Create a cookie on a subdomain that is accessible by all other subdomains

I have been working on a NextJS project that involves multiple apps on separate subdomains. My objective is to enable single sign-on so that when I log in to one app, I am automatically signed in to all the others. We are utilizing nookies as our cookie ha ...

javascriptnext.jscookiessubdomain

Guide to removing a particular textfield from a table by clicking a button with ReactJS and Material UI

I need assistance with deleting a textfield on a specific row within a table when the delete button for that row is clicked. Currently, I am able to add a text field by clicking an add button and delete it by clicking a remove button. However, the issue is ...

javascriptarraysreactjsecmascript-6material-ui

retrieving values from a JSON array in Xcode

Just starting out with XCODE and Objective C, I've been searching through forums but can't find what I need. I'm attempting to extract a specific value from an array using Teleduino web service. However, for some reason, I'm not getting ...

arraysjsonxcode

Develop an Azure Logic App that automatically generates a JSON format using dynamic variables through an HTTP

Struggling with creating the JSON format for an HTTP Post: Specifically, having trouble concatenating static content with dynamic variables in order to make it work. How can I manually combine what needs to be posted along with variable values? { "colo ...

jsonazureazure-logic-appsworkflow-definition-language

How can I choose a JToken using JSONPath when there are multiple possible name options to consider?

I have a JSON object structured like this: { category1: { items [ ... ] } } It could also be represented as: { category2: { items [ ... ] } } My goal is to extract the JArray of items using a single JSONPath. Is there a ...

jsonjson.netjsonpath

combine multiple keys into a single element with angular-translate

Within my application, I am retrieving translation keys from a single cell within a database table and dynamically displaying them on a settings page. While most entries will have just one key in the display object, there are some that contain multiple key ...

javascriptangularjstranslate

The Ajax post function is not functioning as expected

Here is my code: $.ajax({ type: "POST", url: "mailyaz.php", data: { name: "testest" } }); Currently, the code works with a simple message of "testest". However, I am trying to post my javascript variable (var mysubjec ...

phpjavascriptjqueryajax

AngularJS OAuth authentication Pop-up: Waiting for JSON response

I am looking to initiate an oauth request in a new window for my project. Here is how I can open the new window: var authWindow = $window.open("/auth/google/signin", ""); After the callback, my server will respond with JSON data: app.get('/auth/ ...

javascriptjsonangularjsoauth-2.0passport.js

Is it possible to view newly added text in real-time on a separate client in Node.js without relying on socket.io?

I am in the process of creating a straightforward web application where users can input phrases. The app works fine, except for one issue - it doesn't display new additions from other users instantly. I am aware that socket.io could solve this problem ...

javascriptmongodbexpresspostsocket.io

Different Success Functions with Ajax for Multiple Forms

Thanks to the assistance I received on StackOverflow, I successfully implemented validation and submission for two forms with different action pages. I am now looking for a way to customize the success functions based on which form was submitted. Here is ...

jqueryajaxform-submit

Beginning your journey with Mock server and Grunt

Although I have gone through the documentation available at , I am still struggling to get the mockserver up and running despite spending hours on following the instructions provided in the guide. Could someone please outline the precise steps or identify ...

javascriptgruntjsmocking

Dynamic value updates using jQuery input type formulas

I need help with a form that has two inputs: The first input allows the user to enter an amount, such as 1000. The second input is read-only and should display the value of the first input plus 1%. For example, if the user types in 1000 in the first fie ...

javascriptjqueryhtml

What approach provides the most effective way to navigate through an NPM Package?

I have an idea to enhance a particular open source NPM package. Although I understand the necessary steps, it would be incredibly beneficial to have the ability to debug the package while it is in operation. Is this achievable? ...

javascriptnode.jsdebuggingnpm

Retaining previous values in Angular reactive form during the (change) event callback

Imagine having an Angular reactive form with an input field. The goal is to keep track of the old value whenever the input changes and display it somewhere on the page. Below is a code snippet that achieves this functionality: @Component({ selector: & ...

javascriptangularangular2-formsangular-reactive-formsangular-event-emitter

How to transform a list of tuples into JSON using Erlang

Seeking assistance with a mnesia query that produces a list of tuples in the format: [{"str", 10}, {"str2", 20}] Attempting to convert this result to JSON using jiffy but encountering issues with jiffy:encode/1. Any suggestions on how to resolve this dil ...

jsonerlangjiffy

JavaScript is able to access the HTML content of the previously opened tab when saving the window

Seeking advice from the knowledgeable community at Stack Overflow! I have a project that I'm unsure how to start, and I could use some fresh ideas. My goal is to access the HTML source code of a previously opened tab or one that is still loading on m ...

javascriptajax