ga-wdi-exercises/project4

Error with API after deploying

Closed this issue · 3 comments

jdpolakoff commented

Hey instructor crew,

I'm having an issue with requesting data from my 3rd party API once I have deployed. I had no CORS issues or anything like it when in development, but now that my app is on Heroku, I'm getting this error when trying to request data from the API:

jquery.js:9566 Mixed Content: The page at 'https://fishwrap.herokuapp.com/search/Irma' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://beta.newsapi.org/v2/top-headlines?q=Irma&language=en&apiKey=2046072022de4210a11c3a47994a1fb7'. This request has been blocked; the content must be served over HTTPS.

I tried changing the HTTP in my AJAX request to HTTPS, but that gave me a separate error:

Failed to load resource: net::ERR_INSECURE_RESPONSE

The API says it is CORS enabled and that requests should be able to be made from the front end. See here: https://newsapi.org/#documentation

Also for background, I used this Heroku buildpack for create-react-app to deploy:
https://github.com/mars/create-react-app-buildpack#user-content-continue-development

Repo here: https://github.com/jdpolakoff/fishwrap

Hope there's a fix! thanks

juancgarcia commented

This Mixed Content Error/Warning is not a CORS issue but is instead a security policy of the browser. It arises because some parts of the site and ajax data are retrieved via a secure connection (https://) and other resources are transmitted in the clear (http://)

Because the front end was delivered securely, all sensitive data like ajax responses or javascript files must be sent securely as well or will be rejected.

You have a few options here to try:

  • The ideal solution is to try to retrieve the ajax calls over https. It looks like you tried this, but the API doesn't support secure transmissions. I skimmed over their api and it seems v1 does allow https. Maybe consider switching away from the beta v2
  • Retrieve the front-end via http and not https: http://fishwrap.herokuapp.com.
    • This will still give some warnings for Mixed Content when any secure transmissions are attempted but they shouldn't be rejected

More info:
https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content

jdpolakoff commented

Ok, that makes sense. I would vastly prefer to continue using the beta v2 of the API, since the search functionality and many of the homepage buttons can only work with v2.

Is there a simple way to by default retrieve the site via http? It works on first load, but on refreshes it defaults back to https, causing the site to break.

juancgarcia commented

It shouldn't switch protocol on refresh. Perhaps you have an old link or navigated back in history to where the url was https.