0

I was trying to host my React project on GH Pages. The deploy worked fine but when I try to search for gifs I get the following error

http_browser.js:47 Mixed Content: The page at 
'https://pimmesz.github.io/react-giphy/' was loaded over HTTPS, but 
 requested an insecure XMLHttpRequest endpoint 
'http://api.giphy.com/v1/gifs/search? 
q=h&limit=10&rating=g&api_key=MYAPIKEY'. This request has been blocked; the 
content must be served over HTTPS.

It seems like the Giphy API is making a http request instead of https. Is there a way to change the default url which the API uses?

import React, { Component } from 'react';

import giphy from 'giphy-api';

import Search from './search.jsx';
import Gif from './gif.jsx';
import GifList from './gif_list.jsx';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      gifs: [],
      gif: "xBoysJgwhLEZtAjbY1"
    }
  }

  search = (query) => {
    giphy('APIKEY').search({
      q: query,
      limit: 10,
      rating: 'g'
    }, (err, res) => {
      this.setState({gifs: res.data})
    });
  }

  select = (id) => {
    this.setState({gif: id})
  }


  render() {
    const gifs = this.state.gifs;
    return (
      <div>
        <div className="left-scene">
          <Search search={this.search}/>
          <Gif id={this.state.gif} select={this.select}  />
        </div>
        <div className="right-scene">
          <GifList gifs={gifs} select={this.select} />
        </div>
      </div>
    );
  }
}

export default App;
Pimmesz
  • 335
  • 2
  • 8
  • 29
  • 1
    Hi @Pimmesz, the error says that the request comes from your app, so you should check your request url path and change http to https, could you share your gh link? – vitomadio Aug 18 '18 at 10:40
  • Thanks Vito! I've looked through the app but all the requests I make are https... Link to repo https://github.com/pimmesz/react-giphy Link to gh pages live version https://pimmesz.github.io/react-giphy/ – Pimmesz Aug 18 '18 at 10:54
  • I found the following in the `index.js` in the `giphy-api` located inside my `node-module`. So by default it is making a http request instead of https. I however have no idea how to change this so that it is used by the Giphy API used in my project... `/** * @param options {String|Object} - * options.https {Boolean} - Whether to utilize HTTPS library for requests or HTTP. Defaults to HTTP. */` – Pimmesz Aug 18 '18 at 11:06
  • 1
    Ok seems that the base url of the API uses http, I saw that you're usin giphy-api in the search function the only thing that occurs to me, is to make the request manually to the API end point as you did in you gif.js file in order to not to use node_modules. P.S I've never work with this API but hope this advice could helps. Nice code. – vitomadio Aug 18 '18 at 11:37
  • Thanks Vito! That worked!! Live version https://pimmesz.github.io/react-giphy/ Repo https://github.com/pimmesz/react-giphy/blob/master/src/components/app.jsx – Pimmesz Aug 18 '18 at 12:25

1 Answers1

1

Changed the giphy API execution to 

const url = `https://api.giphy.com/v1/gifs/search?q=${query}&limit=10&rating=g&api_key=MY_API_KEY`
      fetch(url)
      .then(results => { return results.json();
      }).then(data => {
        this.setState({gifs: data.data});
      });

EDIT

Found another way!

Setting https to true can be done as an option in the giphy api call

giphy({ apiKey: "MY_API_KEY", https: true })

Pimmesz
  • 335
  • 2
  • 8
  • 29