CORS policy on loadImage()

sai

I am trying to pull images from Googles custom search api and some, not all are getting the following error:

Access to Image at 'http://i2.ytimg.com/vi/aaheQ1GW6oc/mqdefault.jpg' from origin 'http://stevehadley.me' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://stevehadley.me' is therefore not allowed access.

I understand that there are restrictions regarding CORS, however my quistion is why is this happening with some images and not others?

See a live prototype here stevehadley.me/static/shoota/

Type anything into the box and hit submit and then some images will load and others won't, how can I modify my code so that I can load all of the images?

current code:

// Google API variables
var imageDataLoaded;
var apis = "https://www.googleapis.com/customsearch/v1?key=AIzaSyDPhPPumxaocG0E0JGhDf69jiI3X7Pjcpc&cx=011817082943782449326:-z21filwace&searchType=image&imgSize=medium&q=";
var apie = "&";
var input;
var image_index;
var imageLink;

// Array the stores all targets
var targets = [];
var target;
var targetImage;

// x and y spawn coordinates for targets
var x;
var y;
var targetX;
var targetY;

// Image that is shown when a target is hit
var deathImage;


function setup() {
    createCanvas(windowWidth, windowHeight);
    frameRate(2);
    imageMode(CENTER);
    cursor(CROSS);

    var button = select('#submit');
    button.mousePressed(getImages);

    input = select('#queryString');

    function getImages() {
        loadJSON(apis + input.value() + apie, gotImages, 'jsonp');
    }

}

function gotImages(imageData) {
    imageDataLoaded = imageData;
}

gotImages();

function draw() {

    x = int(random(windowWidth));
    y = int(random(windowHeight));

    // Only create targets if google has sent back the images we need
    if (imageDataLoaded) {

        image_index = int(random(imageDataLoaded.items.length));
        imageLink = imageDataLoaded.items[image_index];
        targetImage = loadImage(imageLink.link);

        // Add new target each frame
        targets.push(new Target(x, y, targetImage));

        //Clear the screen
        fill(255, 255, 255);
        rectMode(CORNER);
        rect(0, 0, width, height);

        // Display all current targets
        for (var i = 0; i < targets.length; i++) {
            if (imageDataLoaded) {
                targets[i].display(targetImage);
            }

        }

    }

}

// Target Class
function Target(x, y, targetImage) {

    this.display = function() {
        if (imageDataLoaded) {
            this.targetX = x;
            this.targetY = y;
            this.TargetPicture = targetImage;
            image(this.TargetPicture, this.targetX, this.targetY, 200, 200);
        }

    }
}

function mouseClicked() {
    for (var i = 0; i < targets.length; i++) {
        var distanceChecker = dist(mouseX, mouseY, targets[i].targetX, targets[i].targetY);
        // If target is hit
        if (distanceChecker < 150) {
            fill(255, 0, 255);
            // Show explosion when target hit
            deathImage = createImg('assets/deathImage.png').hide();
            image(deathImage, mouseX, mouseY, 300, 300);
            // Remove target from array
            targets.splice(i, 1);
        }
    }
}

GoToLoop

https://forum.Processing.org/two/discussion/11608/i-can-t-display-images-dynamically-loaded-from-web-with-p5-js-always-a-cross-domain-issue

sai

Hi @GoToLoop, I did come across that thread a few days ago but when I read "If you wanna take a shot on that fix, here are the source codes for both loadImage() & createImg():" I figured it was beyond my ability. Thanks for the quick answer and great little hack.