Cors error when getting video url from ipfs after uploading

Moralis General
#1

Hi @cryptokid
I have one error using moralis.

After uploading video on ipfs using moralis, when getting the video from ipfs url, it occurs strange CORS error.
image

image
image734×210 39.4 KB

As you can see above screenshots, video link has correct prefix: https://gateway.moralisipfs.com/ipfs/
You can see my video from this full url: https://gateway.moralisipfs.com/ipfs/QmQVj3gXiiGNJnwhFXxrYBxXW2Z4X5fbBFVC2yvHo3jPTX

I think It worked well yesterday.
But, today, it doesn’t work.

I don’t know the reason why it occurs CORS error now.

Hope your quick help.

Best regards,

#2

You can try access it from http://127.0.0.1:3000/ instead of http://localhost:3000

#3

@qudusayo
Still same error.
And then, it doesn’t work on server too.

#4

The thing what I think strangely is not error for images.
Only, it occurs cors error for video file.

#5

What way are you trying to use the video ??

#6

try to change the prefix to use ipfs.moralis.io:2053

#7

I am using the url for video NFT.
User uploads video for his nft on ipfs using moralis and save metadata with the url, and then can see his video uploaded from ipfs url on metadata.

#8

you can get a CORS error also when the url gives a timeout or the server doesn’t respond

this seems to work for me:

fetch('https://gateway.moralisipfs.com/ipfs/QmQVj3gXiiGNJnwhFXxrYBxXW2Z4X5fbBFVC2yvHo3jPTX')
#9

You can consider checking the way the video is shown to the user too. It worked fine for me too passing the link to a video src tag

#10

@qudusayo @cryptokid
Sure, I am using video tag for it.

{ nft.item_type && nft.item_type == 'video' &&
  <video width="100%" height="100%" controls className="lazy img-fluid">
      <source src={nft.image} type={nft.mime_type} />
  </video>
}
#11

you can try to replace the ipfs prefix with any other public IPFS prefix like from ipfs.io or cloudflare

#12

There is not the correct solution?

#13

I think whether it is because of moralis cache problem for video.
it is working for image:

image
image565×552 89.9 KB

it is not working for video:
image

#14

What about hardcoding the video url ??

#15

Because I have to confirm/get the mime type(video, image, audio) from the ipfs url, I was using @tokenizer/http node module.
Till yesterday, it did work very well.
But, a few hours ago, it doesn’t work with cors error.
I am not sure the reason.

#16

The issue seemed coming from the way you’re trying to get the mime type. Was able to get the mime-type in such way

let target =
  "https://ipfs.moralis.io:2053/ipfs/QmQVj3gXiiGNJnwhFXxrYBxXW2Z4X5fbBFVC2yvHo3jPTX";
const req = await fetch(target);
const mimeType = await req.headers.get("content-type");
console.log(mimeType);

Also changed the prefix as @cryptokid mentioned

2 Likes
#17

@qudusayo @cryptokid
I have the same issue.
I uploaded image file via moralis into ipfs.
When I get the image from “https://ipfs.moralis.io:2053/ipfs/QmXHXpirhz3kN9Rqe8V43WRdypucb16nJ9DHS43LiRgPQf” it says Cors ERROR.
but, to fetch from gateway does work.

And then, for ipfs hash “QmQVj3gXiiGNJnwhFXxrYBxXW2Z4X5fbBFVC2yvHo3jPTX”,
gateway url doens’t work, but, ipfs.moralis.io:2053 does work.

So, which public url should I use?
I am not sure why it doesn’t work.

Can you explain in details?

Regards.

#18

How are you using fetch on ipfs.moralis.io:2053 image url?

I tried this with ipfs.moralis.io:2053 url and it is able to get the url data.

let target =
  "https://ipfs.moralis.io:2053/ipfs/QmXHXpirhz3kN9Rqe8V43WRdypucb16nJ9DHS43LiRgPQf";
const req = await fetch(target);
const mimeType = await req.headers.get("content-type");
console.log(req);
console.log(mimeType);
#19

Hello,
It does work above code with
“https://gateway.moralisipfs.com/ipfs/QmYrua6EYeYMBRe3SMGR9iBXoAu4ou9GArkprRfQGN4iUV”.

But, it doesn’t work above code with
“https://gateway.moralisipfs.com/ipfs/QmRC3xUe9jC4EYVbEohXSCTEbiKXEQoyLMik9vKeocWSrh”
(it occurs cors error)

So, I am not sure which public gateway url should I use?

Do you understand my issue?

Thank you.

#20

Can you try with ipfs.io public gateway or with cloudflare public gateway?