I have to make a “simple” project, where we select an API and make a project out of it. I picked Numbers API. The user has to insert a year and it should get a response “text” of an interesting fact about it (from the link http://numbersapi.com/{your number}/year?json).
Now the issue is that I did this project exactly like many other API projects, but this one won’t get any response.
These are all the blocks. What am I missing?
Can you please check the green error block for any messages?
What environment are you testing from, a mobile device or the live preview in the browser?
I’m sorry, but how do I check the error block? When right-clicking it, it doesn’t show “Show advanced options” or anything of the sorts.
I’m testing it from the live preview in the browser.
Just noticed you’re new to the community @silverhinnohico9 . Welcome!
As soon as you’re able to please test this project from the companion app. It should work without issue if you use it there.
This is referred to as a CORS issue. It has to do with how we are calling the API from within an iframe within a website.
If you don’t own the API that you’re calling information from there’s not much you can do to change it. What you can do however is create a proxy to call the API for you. This could easily be accomplished by using xano. You would create an API endpoint in xano. From xano you could call out to any other API and then return the data to your Thunkable app. This would solve the cross origin issue that you’re experiencing commonly referred to CORS
Usually when using the green block to find errors, in the then do section of an API call, you will place an if then block. If error come then print the air to a label that loves on the screen otherwise do whatever you would want to do to process the incoming data.
i found a way to get around “cannot GET” errors in webapi (due to CORS - cross origin issue). the answer is allOrigins whose catch phrase is " Pull contents from any page via API (as JSON/P or raw) and avoid Same-origin policy problems."
the original problem started because of this behavior:
the link below works in a browser and also works in Postman but does NOT work in Thunkable (due to CORS issues apparently)
http://numbersapi.com/2000/year?json
this is the result from a browser:
but when coded in thunkable, it returns with a response “cannot GET”.
ErrorCannot GET /web-build/numbersapi.com/2000/year
however if you use allOrigins, you code the url like this:
https://api.allorigins.win/get?url=http://numbersapi.com/2000/year?json
Below is what it looks like when it is entered from a browser. note how the desired url is included in the call. also note that the response of the desired url is now contained as a json variable called contents.
this is how to code it in thunkable. (notice the nested json processing)>
with this result (each successive call gives a different result for the same year)
here’s the project link
https://x.thunkable.com/copy/377e3ddfcfb3e3ae9ba9ce18033d1aca
2 Likes
Thanks @manyone.
This is a CORS Proxy. There are many of them. They would work for such a public API but you cannot / should not use it for sensitive data. Just like XANO, this proxy actually exposes your data, at least to the relaying servers. The risk involved need to be assessed before deciding to proxy your information.
1 Like
At this time, web apps and web preview wont work with all api’s due to CORS issues. One way to get around this issue would be to proxy the calls using a service like Xano as shown below. If you try the following URL in a web previewed Thunkable app, you’ll notice the issue that requires proxying the call.
http://numbersapi.com/2022/year?json
[updated video ^^^]
The idea here is that if you have an API that you can’t access but want to be able to using web apps or live preview, you can proxy them using a service like Xano
Remixable Project Link
[update added project link ^^^]
@manyone has included a solid example for most use cases! Thank you!!
@muneer is right though and if you are passing sensitive info, you need to ensure your data clearing house (xano in this case) and you have signed the appropriate agreements (e.g. BAA) or that. they. engage in the appropriate type of encryption. Additionally, you may need to ensure that your server is located in an appropriate geographical location (e.g. the EU vs US).
2 Likes