[Bug]: Fetch CORS issue

[gootik]

Is there an existing issue for this?

• [X] I have searched the existing issues

Description

When I use fetch() on the client side it cannot load resources because of CORS issue.

Steps To Reproduce

1. Go to Edit mode of any application
2. create a custom JS function
3. add a fetch operation like await fetch('https://api.ipify.org?format=json')
4. See that browser blocks call with "CORS Missing Allow Origin" error

Public Sample App

No response

Environment

Production

Severity

High (Blocker to building or releasing)

Issue video log

No response

Version

Self Hosted - v1.27

[Nikhil-Nandagopal]

@gootik we'll look into this. In the meanwhile, you can hit that URL using the regular API query

[gootik]

Thank you @Nikhil-Nandagopal , for this specific issue we would want the call to be from the Client side not server side. so the regular API query would not be sufficient :( Unless we can force the API query to run from client rather than appsmith server?

[rishabhrathod01]

@gootik Could you please share the exact error you notice in the browser by sharing a screenshot of the same?

Also, the implementation for extracting the JSON with a fetch for your case should be as shown below.

async myFun2 () {
    return await fetch('https://api.ipify.org?format=json').then(res => res.json())
}