B4J Question BananoFetchResponse

ddefrain

Member
Licensed User
Longtime User
Hi, I Need to get the Steps from Google Maps.

I got the following.

B4X:
    Dim response1 As BANanoFetchResponse
    Dim error1 As BANanoObject
    Dim data As BANanoJSONParser
 
    Dim fetch1 As BANanoFetch
    Dim options As BANanoFetchOptions
    options.Method = "GET"
    options.Initialize
    fetch1.Initialize("https://maps.googleapis.com/maps/api/directions/json?origin=San Diego,CA&destination=National City,CA&key=apikey",options)
    fetch1.Then(response1)

    fetch1.Return(response1.Json)
    fetch1.Then(data)

    Log(data)
    fetch1.Else(error1)
    Log(error1)
    fetch1.End
'This one throws the following error

'Access to fetch at 'https://maps.googleapis.com/maps/api/directions/json?origin=San%20Diego,%20CA&destination=National%20City;%20CA&key=apikey' from origin 'https://whsystems.000webhostapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the 'requested resource. If an opaque response serves 'your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

'If I Set the no-cors mode get the following error
SyntaxError: Unexpected end of input (at app1662667859006.js:421:86433)
    at app1662667859006.js:421:86433


'I test the following and it gives no error 
    Dim response2 As BANanoFetchResponse
    Dim json1 As BANanoJSONParser
    Dim fetch1 As BANanoFetch
    fetch1.Initialize("https://api.edamam.com/search?q=plan&app_id=5b6623d5&app_key=46674aa2193dbb7b88ffd897331e661a&from=0&to=9", Null)
    fetch1.Then(response2)
    fetch1.return(response2.Json)
    fetch1.Then(json1)
    Log(json1)
    fetch1.end
'This one throws the info no error not blocked by CORS
[LIST=1]
[*]Object
[LIST=1]
[*]count: 1012
[*]from: 0
[*]hits: Array(9)
[LIST=1]
[*]0:
[LIST=1]
[*]recipe: {uri: 'http://www.edamam.com/ontologies/edamam.owl#recipe_31d69a7dae56534fb5c752d6140e482f', label: 'Barbecue Chicken and Coleslaw Potato Skins Recipe', image: 'https://edamam-product-images.s3.amazonaws.com/web…76c326886c1f439151a999e15cb1c0ef8d4ab66778953ce82', source: 'Chowhound', url: 'https://www.chowhound.com/recipes/barbecue-chicken-and-coleslaw-potato-skins-29406', …}
[*][[Prototype]]: Object
[/LIST]
[*]1: {recipe: {…}}
[*]2: {recipe: {…}}
[*]3: {recipe: {…}}
[*]4: {recipe: {…}}
[*]5: {recipe: {…}}
[*]6: {recipe: {…}}
[*]7: {recipe: {…}}
[*]8: {recipe: {…}}
[*]length: 9
[*][[Prototype]]: Array(0)
[/LIST]
[*]more: true
[*]q: "plan"
[*]to: 9
[*][[Prototype]]: Object
[/LIST]
[/LIST]

At server side in the .htaccess I put the following
Header set Access-Control-Allow-Origin "*"

And the problem persists

Can You please help me?

Thank's in advance
Best Regards
 
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
Google has restricted to make such fetch calls from a client on a different domain than Google itself since 2018. The reason it works from the browser (pasting such an url in the address bar) is because you call from a 'google' domain to another 'google' domain, which is fine for the 'strict-origin-when-cross-origin' policy of google. In your Web Apps you have to use the Maps API. You can still use such an url from a server app (like jServer), where you can actually set an Header set Access-Control-Allow-Origin "*" in a filter. You can not control this header from the client side via a fetch.
 
Upvote 0
Top