-1

I have a div with an image that I'm getting from an API

let newIcon = (query) => {
    return $.ajax({
        url: "https://noun-project-proxy.herokuapp.com/v1",
        method: 'GET',
        data: {
            url: `icons/${query}`,
            params: JSON.stringify({

            })
        }
    }).then(function (response) {

 let image = response.icons[0].preview_url;

 $("#container1").append(`<div><img
 src="${image}"></div>`);

});

The image will show up on localhost but when I deploy the site I get the error "No 'Access-Control-Allow-Origin' header is present on the requested resource"

I can't figure out how to get past this error. Can anyone help me out? I've tried adding crossOrigin='anonymous' to the img but that blocks the picture on both the deployed version and localhost

orangepeel
  • 43
  • 5
  • that's a web server question - what's your server? this seems to be with the ajax call that you *havent* shown – Daniel A. White May 31 '18 at 01:41
  • Sorry, I edited my post to add the ajax call. I'm just confused because the response I'm getting is working on localhost but not when I deploy it using firebase – orangepeel May 31 '18 at 01:57

1 Answers1

2

I think what you've encountered is CORS - Cross-Origin Resource Sharing. I assume your call is trying to load an image from a domain that is not same as yours. If you access to the server, you could probably include Access-Control-Allow-Origin: * (This will allow all domains to access the resources on server, and we're not talking about authentication or authorization here) or probably Access-Control-Allow-Origin: http://youdomain in your HTTP response. PS: I couldn't leave a comment as I don't have 50 reputations yet, hence, an answer!

AD8
  • 2,168
  • 2
  • 16
  • 31
  • I'm a bit confused, where would I include Access-Control-Allow-Origin: * in my code? – orangepeel May 31 '18 at 02:00
  • I can't guarantee if CORS is an issue, but sounds like it is. You'll need to make changes on the server-side. And how to do that? well, that depends on the technology that you're using for web server. checkout this answer by MindingData, this answer explains how to enable CORS on ASP .NET Core WebAPI https://stackoverflow.com/a/44379971/4794396 . – AD8 May 31 '18 at 02:02