React 应用程序在本地正常运行，但在 Github 页面上不正常答案

【问题标题】：React app functions correctly on local but not on Github PagesReact 应用程序在本地正常运行，但在 Github 页面上不正常
【发布时间】：2020-11-27 13:44:07
【问题描述】：

我将我的一页 React 项目推送到 github 页面。当页面出现时，它不能正常工作。这是一个基本的应用程序，用户通过 API 进行搜索，然后当他们点击一部电影时，它就会被添加到他们的观看列表中。但是，当我通过搜索输入查询时，与出现电影且一切正常的本地主机相比，什么都没有发生。

当我通过控制台检查它时，我收到以下错误： '' 处的页面是通过 HTTPS 加载的，但请求了不安全的资源 ''。此请求已被阻止；内容必须通过 HTTPS 提供。

这是我的 package.json

{
  "name": "watchlater",
  "homepage": "https://myusername.github.io/watchlater/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "bootstrap": "^4.5.3",
    "gh-pages": "^3.1.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

还有什么我需要改变的吗？我按照此处的说明 (https://create-react-app.dev/docs/deployment) 将其发布在 gh-pages 上，但实际功能不起作用。

【问题讨论】：

您是否对任何资源使用 http 而不是 https？
使用开发者工具中的安全标签。应该准确地告诉你哪个资源是不安全的。

标签： reactjs api github-pages

【解决方案1】：

此错误称为“混合内容”您正试图通过“HTTPS”站点上的“HTTP”访问，因为这容易受到黑客的窃听攻击，这是违规行为。

https://web.dev/fixing-mixed-content/

【讨论】：

【解决方案2】：

原来我的 API 调用使用的是 HTTP 而不是 HTTPS。我将其更改为 HTTPS，现在可以使用了。

【讨论】：