Thumbnails cannot load while used from Moralis SDK (CORS error with localhost parcel build)

Moralis General
#1

Hi all, one more problem comes with CORS policy

I load tokens :
const tokens_from_moralis = await Moralis.Web3API.account.getTokenBalances();

I get for example 1 token:

  1. balance: “758843916378527162757”
  2. decimals: “18”
  3. logo: “https://cdn.moralis.io/eth/0xf4d861575ecc9493420a3f5a14f85b13f0b50eb3.png”
  4. name: “Fractal Protocol Token”
  5. symbol: “FCL”
  6. thumbnail: “https://cdn.moralis.io/eth/0xf4d861575ecc9493420a3f5a14f85b13f0b50eb3_thumb.png”

then using thumbnail:

var empTable = document.getElementById('token_table_dyn');

    var tr = empTable.insertRow(-1);

    for (var h = 0; h < arrHead.length; h++) {

        if (h == 0) {

            var th = document.createElement('th'); // create table headers

            th.innerHTML = "<img src="+arrHead[h]+">";  // insert image dynamically

            tr.appendChild(th);

        } else {

            var th = document.createElement('th'); // create table headers

            th.innerHTML = arrHead[h]; // insert the rest of token info

            tr.appendChild(th);

        }

    }

here is piece of table creation:

th.innerHTML ="<img src="+arrHead[h]+">;  // insert image dynamically
whete arrHead[h] = thumbnail link

result:
GET https://cdn.moralis.io/eth/0xf4d861575ecc9493420a3f5a14f85b13f0b50eb3_thumb.png net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

of course using the link allows to see it in browser but CORS policy on server for this resource doesn’t allow to load it by localhost

any ideas beside changing CORS policy on server?

#2

It works fine for me when I’m using http:/127.0.0.1/

#3

I’m using parcel http://localhost:1234/#

#4

Then try to access: http:/127.0.0.1:1234/#

#5

I changed to http://127.0.0.1:1234/ in parcel:

    "scripts": {
        "start": "parcel serve app.html --host 127.0.0.1",
        "build": "parcel build app.html"
    },

and still the same error, Is it at my end or at Moralis server end?

#6

I mean in your browser when you access the application, to use 127.0.0.1 instead of localhost.

#7

same result, is it connected with mixed content of secure and not secure as localhost is htttp and Moralis png for tokens are served with https?

#8

I run this code from javascript console and it worked fine (I already had a div with id “x” in my html):

div_x = document.getElementById("x")
div_x.innerHTML = '<img src="https://cdn.moralis.io/eth/0xf4d861575ecc9493420a3f5a14f85b13f0b50eb3_thumb.png">';
#9

serving on https has no effect same result

#10 
document.getElementById("x")
<div id=​"x">​ a ​</div>​
div_x = document.getElementById("x")
div_x.innerHTML = '<img src="https://cdn.moralis.io/eth/0xf4d861575ecc9493420a3f5a14f85b13f0b50eb3_thumb.png">';
'<img src="https://cdn.moralis.io/eth/0xf4d861575ecc9493420a3f5a14f85b13f0b50eb3_thumb.png">'

cdn.moralis.io/eth/0xf4d861575ecc9493420a3f5a14f85b13f0b50eb3_thumb.png:1 GET https://cdn.moralis.io/eth/0xf4d861575ecc9493420a3f5a14f85b13f0b50eb3_thumb.png net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

it changes “a” to picture like but the picture is default

document.getElementById("x")

<div id=​"x">​<img src=​"https:​/​/​cdn.moralis.io/​eth/​0xf4d861575ecc9493420a3f5a14f85b13f0b50eb3_thumb.png">​</div>​

so I need one more test, deploy html on www and run code there

#11

So I’ve tested that due to parcel build process It couldn’t get resource, everything works when it is compiled without modules, thanks for help!