使用 http => https 反应本地主机问题

Question

我使用了react官方文档的说明，但是localhost还是从http://开始。

我的 package.json 文件，我试图在其中添加解决方案。
我也试过 'set HTTPS = true && npm start'。

{
  "name": "project",
  "version": "1.0.0",
  "description": "Project",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p",
    "start": "webpack-dev-server --hot --inline -d && HTTPS=true react-scripts start", 
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/polyfill": "^7.8.7",
    "formik": "^2.1.4",
    "ramda": "^0.27.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-https-redirect": "^1.1.0",
    "react-iframe": "^1.8.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "^3.4.1",
    "react-scroll-up-button": "^1.6.4",
    "styled-components": "^5.0.1",
    "whatwg-fetch": "^3.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/plugin-proposal-async-generator-functions": "^7.8.3",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/plugin-transform-async-to-generator": "^7.8.3",
    "@babel/plugin-transform-regenerator": "^7.8.7",
    "@babel/preset-env": "^7.7.6",
    "@babel/preset-react": "^7.7.4",
    "autoprefixer": "^9.6.1",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "gh-pages": "^2.2.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "^3.0.0",
    "react-inlinesvg": "^1.2.0",
    "sass-loader": "^7.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

webpackconfig.js

const path = require("path");

const Html = require('html-webpack-plugin');

module.exports = {
  entry: [
    "whatwg-fetch",
    "./js/index.js",
  ],
  output: { 
    filename: "js/out.js",
    path: path.resolve(__dirname, "build")
  },
  devServer: {
    port: 3001,
  },
  module: {
    rules: [

      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },

      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [
                require("autoprefixer")()
              ],
            },
          },
          'sass-loader',
        ]
      },

      {
        test: /\.(jpg|jpeg|gif|png)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            publicPath: 'images',
            outputPath: 'images',
          }
        }
      },

      {
        test: /\.(eot|ttf|woff|woff2)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            publicPath: 'fonts',
            outputPath: 'fonts',
          }
        }
      },
    ]
  },

  plugins: [
    new Html({
        filename: 'index.html',
        template: './index.html',
    })
  ]
};

我是初学者，我不会处理它，如果有人能帮助我，我将不胜感激。

Answer 1

在 package.json 中尝试在启动脚本中添加 set HTTPS=true 而不是 HTTPS=true。

Answer 2

SET HTTPS=true 的选项适用于使用 create-react-app 制作的项目。由于你有自己的webpack配置文件，所以你必须更改配置以启用HTTPS。

您可以使用：

devServer: {
    https: true
}

这会启用自签名证书。您可以提供证书：

devServer: {
    https: true,
    key: fs.readFileSync('/path/to/server.key'),
    cert: fs.readFileSync('/path/to/server.crt'),
    ca: fs.readFileSync('/path/to/ca.pem'),
}

Docs

使用 http => https 反应本地主机问题

React localhost problem with http => https

npm

reactjs

webpack

package.json

react-native