Hello, Praneet Dixit! 👋
Good job on this challenge! I just finished this project too. Kudos for button animation and this init rocket loader. There is a problem on Firefox. Console throws an CORS error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https (Reason: CORS request did not succeed). I encountered this problem too. Read about this error. The fix is to send your request to a proxy. A proxy acts as an intermediary between a client and server. The proxy server operates in between the frontend web app making the request, and the server that responds with data. Add https://cors.bridged.cc/ to any URL you’re fetching from. In your example it will be: https://cors.bridged.cc/https://geo.ipify.org/api/v1?apiKey=yourapikey.
Good luck with that, have fun coding! 💪
@PraneetDixit
Posted
Thanks for the comment. I had not tested the app on Firefox. Will surely fix that. The intermediary server can also help in masking the API key.
My only concern is - The intermediary server will result in an added request (client - intermediary - api) and will probably increase the request time. Any fix around that?
@PraneetDixit This is my solution to this challenge. I used netlify lambda serverless functions to fetch my data so my API_KEY never shows up in my code. It doens't increase the request time since only netlify is fetching data from API. I just request that data from netlify which is instant.
@PraneetDixit
Posted
Thanks. I never thought about netlify functions!
@PraneetDixit
Posted
@tediko I tried to load the page on Firefox just now. I could not see any error in the console. The requests were also responded with a 200 statusCode.
<br>
One thing though, I updated Firefox before loading the page. I think the latest update addressed that issue. Or was my browser configured differently? Can you please check and confirm?
@PraneetDixit It is still returning a "NetworkError when attempting to fetch resource." error for me on Firefox. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at...
