Fetching data from an unsecure HTTP resource and configuring my back-end for deployment

Question

For better context, here's a link to branch for deployment in my [project repository](https://github.com/fantasy-thrill/weather-app/tree/second_test).

I built a weather app in React + Vite that fetches city data from an unsecure HTTP resource, as seen in the `SearchCity.tsx` [file](https://github.com/fantasy-thrill/weather-app/blob/second_test/src/components/SearchCity.tsx). However, when I published my app to Amplify, the app can't fetch data from the resource due to cross-protocol policies. I tried implementing a proxy server in my `app.js` [file](https://github.com/fantasy-thrill/weather-app/blob/second_test/lib/app.js) to handle the data being fetched, but it didn't work. I think it's most likely because the `app.js` file in my back-end `lib` directory is not being recognized during deployment. I tried implementing [this](https://github.com/fantasy-thrill/weather-app/blob/second_test/amplify/backend/hosting/amplifyhosting/deploy-manifest.json) `deploy-manifest.json` file to set the `lib` directory as the app's backend, but still no luck.

Can anyone tell me how I could properly configure the back-end so it can recognized when I publish to Amplify? Or other ways my app could fetch data from an HTTP resource if possible? Also, could anyone take a look at my repository to see if anything else looks incorrect?

MikeLim · Answer

Is your Amplify site using HTTPS? If yes, it is not possible for a HTTPS site to request HTTP content because of [mixed content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content) security policy.

You can implement HTTPS proxy to fetch HTTP content.  Your proxy [code](https://github.com/fantasy-thrill/weather-app/blob/second_test/lib/app.js) looks OK. I am not much of a Node developer, so apologies if my comments are incorrect.

I noticed that any request to `http://api.geonames.org/` gets redirect to `https://api.geonames.org` which currently does not have a properly SSL/TLS cert installed. Can your configure your web request code to ignore cert error?

[This](https://github.com/microsoft/vscode/issues/173314#issuecomment-1435361371) may help
```
const options = { rejectUnauthorized: false };   // ignore cert error
url = "https://api.geonames.org/";
https.get(url, options);
```

Leon · Answer

Hi, It appears that you are hosting an SSG app using Amplify host and require a backend API to request data. Please note that Amplify does not provide servers for hosting your backend API (such as Express) unless you are hosting an SSR app like Next.js app from the Amplify console. In your case, I recommend using the Amplify REST API serverless solution (APIGateway + Lambda function). For more information, please refer to this documentation.

SUPPORT ENGINEER

Leon

answered 2 years ago

Fetching data from an unsecure HTTP resource and configuring my back-end for deployment

Add your answer

Relevant content