已部署的 React 项目上的 HTTPS 错误答案

【问题标题】：HTTPS error on deployed React project已部署的 React 项目上的 HTTPS 错误
【发布时间】：2019-01-25 04:46:42
【问题描述】：

我试图在 GH Pages 上托管我的 React 项目。部署工作正常，但是当我尝试搜索 gif 时出现以下错误

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.

Giphy API 似乎发出了http 请求，而不是https。有没有办法更改 API 使用的默认 url？

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，错误说请求来自您的应用程序，所以您应该检查您的请求url路径并将http更改为https，您可以分享您的gh链接吗？
感谢维托！我浏览了该应用程序，但我提出的所有请求都是 https ...链接到 repo github.com/pimmesz/react-giphy 链接到 gh pages live version pimmesz.github.io/react-giphy
我在我的node-module 内的giphy-api 中的index.js 中找到了以下内容。因此，默认情况下，它发出的是 http 请求而不是 https。但是，我不知道如何更改它，以便我的项目中使用的 Giphy API 使用它.../** * @param options {String|Object} - * options.https {Boolean} - Whether to utilize HTTPS library for requests or HTTP. Defaults to HTTP. */
好吧似乎API的基本url使用http，我看到你在搜索功能中使用giphy-api我唯一想到的就是手动向API 端点，就像您在 gif.js 文件中所做的那样，以便不使用 node_modules。 P.S 我从来没有使用过这个 API，但希望这个建议能有所帮助。不错的代码。
感谢维托！那行得通！直播版pimmesz.github.io/react-giphy回购github.com/pimmesz/react-giphy/blob/master/src/components/…

标签： reactjs api giphy-api

【解决方案1】：

将 giphy API 执行更改为

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});
      });

编辑

找到另一种方式！

将 https 设置为 true 可以作为 giphy api 调用中的一个选项来完成

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

【讨论】：