Failed to Fetch - API Hosted on Heroku

Setting up a REST data connection to an API hosted on Heroku. My REST calls return successfully using Postman, but I’m getting an error message inside the Composer platform: Failed to fetch.

I’m not certain, but I suspect the error may be related to CORS. Either way, I’d appreciate any guidance.

Thank you.

If CORS is not set up correctly, Postman works, but Composer’s REST API test function doesn’t, as it uses browser JavaScript to make the call. If you open the web inspector in your browser, you can see the full error.

That said, the error should be better. I made a ticket at https://tracker.appgyver.com/feature-requests/p/show-proper-error-for-cors-issues-when-testing-a-rest-api to follow this!

@Harri_Sarsa

I am getting CORS error here as well. I don’t have knowledge about what CORS is, but when I checked the inspector, I get the following error.

Access to fetch at ‘https://api.sample.com?api_key=xxxx’ from origin ‘https://platform.appgyver.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: 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.

What can I do on the Composer’s REST API test function to enable the test?

Unfortunately, the CORS headers are set on the server, so if the server doesn’t provide them, the browser’s security settings block the access. So, without piping the API call through a proxy server that would provide the right headers, there’s not much to be done. (The endpoint will work in the mobile app, as there is no CORS enforcing in place, so if you are targeting just mobile devices, you can configure the schema manually and test it via the AppGyver Preview app.)

We’ll be rolling out a Backend-as-a-Service product sometime in the coming months that will allow this kind of request proxying among other things.

For more on CORS, see e.g. https://www.codecademy.com/articles/what-is-cors

@Harri_Sarsa Sorry for the dumb question but is the CORS headers have to be set on the AppGyver servers or on the server hosting the REST API? Would the server hosting the REST API have to be setup to specifically allow the appgyver.com domain? Also, if this is the case, why can I put my resource URL directly in my browser and it works just fine? Also, could the mode: no-cors be setup in the AppGyver Composer somewhere? I guess am having a hard time understanding how the Test function for REST APIs could ever work given these circumstances.

The server hosting the REST API needs to have CORS headers. For the test functionality to work, appgyver.com needs to be whitelisted, whereas web app deployments will need appgyverapp.com whitelisted. Native apps on iOS/Android do not care about CORS.

The reason why directly opening the request URL (or using Postman/CORS) works is because the browser safety features – if you use XHR requests (i.e. a website is loaded in the browser and then makes a HTTP request via JavaScript), modern browsers natively block CORS requests without the correct headers.

That said, if you know you’ve got your REST API config set up correctly and you are planning to only run your app on native iOS/Android, you can just set up the schema manually and everything will work in the Preview app, even if the test doesn’t go through.

One way to improve this is to do the test call on our platform.appgyver.com server and just warn you that this won’t work in the web app without CORS headers, but unless there’s a backend server proxying the requests i.e. mobile app > proxy > backend, CORS headers do need to be set up for the web app to work.

1 Like

A workaround on desktop would be to create a chrome shortcut :
“[PATH_TO_CHROME]\chrome.exe” --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

It will launch a new window with this banner

As stated this method can make your browsing unsafe. So use only for app development and testing only.

1 Like

If everything was fine on the server, the issue might be with the response headers. In the response headers, look for the Access-Control-Allow-Origin (ACAO). When the ACAO of the response headers and the origin of the request don’t match, react’s fetch API will usually throw fail to fetch even after receiving a response.
Source: eduhelphub.com