时间戳

首页 > 解决方案 > React 应用程序在本地正常运行，但在 Github 页面上不正常

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

问题描述

我将我的一页 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 上，但实际功能不起作用。

标签： reactjsapigithub-pages

解决方案

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

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

推荐阅读