Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!
Link to today's deployed app: Link
Link to the repo: github
I am officially done with week 2 building a startup idea for Pioneer.app. If you're interested in creating a startup, or even just pushing out a product, I highly recommend you check them out to experience a fun gamified way of building in a social setting with concrete checkpoints along the way.
Today I tried for 3 days to make a landing page for my product. The landing page was easy, but getting the API call to work was seemingly impossible and I couldn't fix the issue before the deadline for Pioneer.
Seriously, I've never run into this CORS issue before. Does anyone know how to fix it? Will it persist when I put it on Netlify? I'll have to continue debugging next week.
With one hour to go, I hopped on a cool site-builder called Unicorn Platform and cheated. But, they did help me make a nice, responsive site in under an hour.
I'm a little disappointed I couldn't get the MVP going but still happy I was able to crank out something for the Pioneer tournament- a landing page! A crucial first step for a startup even before your MVP is ready.
Looking forward to learning more about properly fetching data in React in the week to come.
5/5 stars - would no-code again :)
Top comments (12)
I’m not sure how Serpmaster has the CORS policy configured on their end, but usually you have to add all domains which are allowed to query the specific API URL. Some APIs just set the
Access-Control-Allow-Originresponse header to*(any domain is able to send a request to them) and some require only specific URLs.I do not know the Serpmaster tool well enough, but perhaps they have an option in settings to specify the URL of the app which should be able to interact with the API?
EDIT: I spotted in your code that you were setting the
Access-Control-Allow-Originheader when calling the Serpmaster’s endpoint. This is not necessary, sinceAccess-Control-Allow-Originis a response header (meaning it would be returned by the server you’ve called) and not a request header.Thanks Lukasz! I’m new to the CORS drama so didn’t quite know what that meant when it was suggested, but glad you clarified it for me.
Maybe when I put it into production on netlify this issue will go away? I will also look in the SERPmaster settings to see if I can add the application there. Thanks!
It could work just fine, but it as mentioned earlier, it all depends on how SERPmaster approaches the topic. If you have any issues, give me a shout here in the comment, will try to help! :)
Add cors-anywhere.herokuapp.com/
before url and it will solve your issue
fetch(
https://cors-anywhere.herokuapp.com/https://api.mapbox.com/geocoding/v5/mapbox.places/${zip}.json?access_token=${mapboxAPIKey})
Hey thanks! I heard this works well for development but not in production so I held off. But maybe I don’t need to worry about this happening in production?
Yep, localhost doesn't play nice with CORS.
stackoverflow.com/questions/108832...
Hey thanks for your comment! Do you mean to say when I put this site in production on Netlify it will probably work? Dang. Should have tried that.
Hey James, have you figured out the cors issue in production? Coz I've faced the same when accessing an external GitHub Jobs api from react app deployed on Netlify, and used that cors-anywhere heroku proxy to get around, it worked at first, but it now has more limitations and one has to manually get temporary access to enable the proxy to work. So I haven't been able to get around with the cors issue since then as it was restricted from server side of api. I've tried solutions like changing proxies, nothing worked. Let me know your resolutions!
Hey Teabag, I haven't revisited this issue but I remember it being incredibly frustrating.
If you end up finding a fix, please repost it here and I will share your solution.
Hey, I fixed the cors issue by creating a simple express server api which allows cross origin requests and fetches data from the external api and returns that data.
I've read somewhere that server to server requests doesn't invoke any cors issues. Also the cors is handled from server side of any api, since we can't handle that for the external api, we get cors issue.
So based on this knowledge, I created an express server, which requests data from external api on hitting a particular endpoint and sends the response as json data back to client.
Used cors module in it and app.use(cors()), which basically allows all cross origin requests to this server. And then in client side replaced the url to my own express api instead of external api.
Hope this was clear and helpful.
Yep, that generally works for me. It's annoying!
You can just block CORS security with a browser extension