In this tutorial you will learn how to get comfortable with creating NFT's in testing mode (using specific networks for that matter in metamask & thirdweb ), you will also learn hot to create fake ethereum (with faucets.chain ) to be used in your tests apps.
This is a basic app, that has no real functionality other than: fetching the data from opensea ✋
Login in Metamask : metamask
Login in ThirdWeb : Thirdweb
Login Opensea
Deploying the app (regardless of the bug)
- When deploying the app regardless of the bug, I encountered another problem, it was impossible to see the components where the 🌟 magic happens.
hardcore-snyder-3fbe84.netlify.app/:1 Access to XMLHttpRequest at 'https://testnets-api.opensea.io/assets?asset_contract_address=0x8Cbb2AE3eB35fB23f2BE1E388Faf6544a9D9fcC8&order_direction=asc&limit=4' from origin 'https://hardcore-snyder-3fbe84.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
testnets-api.opensea.io/assets?asset_contract_address=0x8Cbb2AE3eB35fB23f2BE1E388Faf6544a9D9fcC8&order_direction=asc&limit=4:1 Failed to load resource: net::ERR_FAILED
createError.js:16 Uncaught (in promise) Error: Network Error
at e.exports (main.9cfd9428.js:2)
at XMLHttpRequest.y.onerror (main.9cfd9428.js:2)
/favicon.ico:1 Failed to load resource: the server responded with a status of 404 ()
So after having spend a couple of hours looking for an answer (for the image bug) i felt discouraged but i also felt like i still had some energy to make a last search, so i started to look for CORS and opensea related articles, but i didnt find anything, just other people having the same issue.
CORS blocked your POST request. You need to whitelist your domain (https://mthree.netlify.app) at the server end.
Take a look at what actually CORS is https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
A whitelist is a list of domains approved for authorized access to data. In Chargebee a domain would need to be whitelisted if you wish to send secure subscription/payment related information while redirecting from the Chargebee pages to your domain/website.
When do we need to whitelist a domain?
Checkout Page V3 - The Chargebee instance object is used to set callbacks for checkout, self-serve portals, and to fetch cart and product data related to checkout.To ensure that you get all callbacks you setup, you would need to whitelist your domain in Chargebee. Here’s more on this.
👾
I remember that when looking for a solution to solve the image issue, i read the documentation to manipulate the api line, without success of course!, but i thought... what if there is just a piece of code missing, what if i dont have to try the whole backend setup to just make the cors error go away?
- 🔴 I know its maybe wrong to do it in such way, but i sincerely felt exhausted but i had so much curiosity :)
So i read again that part of the documentation Retrieving events - Testnets
- SO I added this:
api/v1/- to this:
// before
const openseaData = await axios.get(
// permalink
`https://testnets-api.opensea.io/assets?asset_contract_address=0x8Cbb2AE3eB35fB23f2BE1E388Faf6544a9D9fcC8&order_direction=asc&limit=4`
);
//
// after
const openseaData = await axios.get(
// permalink
`https://testnets-api.opensea.io/api/v1/assets?asset_contract_address=0x8Cbb2AE3eB35fB23f2BE1E388Faf6544a9D9fcC8&order_direction=asc&limit=4`
);- You can test it here and enjoy the image bug:
