React - 不支持协议“https：”。 预期的“http：”

Question

Yeah, I saw this post , however I do not have such file where I can edit to use https and my backend is ASP.NET MVC Core 3.1.

So when my React application sends API calls to ASP.NET MVC application, then it throws an error:

TypeError [ERR_INVALID_PROTOCOL]: Protocol "https:" not supported. Expected "http:"
    at new NodeError (node:internal/errors:371:5)
    at new ClientRequest (node:_http_client:158:11)
    at Object.request (node:https:353:10)
    at Array.stream (C:\My Files\\Scripts\react\node_modules\http-proxy\lib\http-proxy\passes\web-incoming.js:126:74)
    at ProxyServer.<anonymous> (C:\My Files\\Scripts\react\node_modules\http-proxy\lib\http-proxy\index.js:81:21)
    at middleware (C:\My Files\\Scripts\react\node_modules\http-proxy-middleware\lib\index.js:46:13)
    at handle (C:\My Files\\Scripts\react\node_modules\webpack-dev-server\lib\Server.js:322:18)
    at C:\My Files\\Scripts\react\node_modules\webpack-dev-server\lib\Server.js:330:47
    at Layer.handle_error (C:\My Files\\Scripts\react\node_modules\express\lib\router\layer.js:71:5)
    at trim_prefix (C:\My Files\\Scripts\react\node_modules\express\lib\router\index.js:315:13)

the url looks like this:

http://localhost:3030/api/foo/bar

Our development config file dev.js looks like this:

// development config
const package = require('../../package.json')
const { merge } = require('webpack-merge')
const webpack = require('webpack')
const commonConfig = require('./common')
const agent = require('agentkeepalive')

module.exports = (webpackConfigEnv, argv) => {
    return merge(commonConfig(argv), {
        mode: 'development',
        entry: [
            'react-hot-loader/patch', // activate HMR for React
            'webpack-dev-server/client?http://localhost:3030', // 
            'webpack/hot/only-dev-server', // bundle the client for hot reloading
            './index.tsx', // the entry point of our app
        ],
        devServer: {
            port: 3030,
            hot: true, // enable HMR on the server
            historyApiFallback: true, //
            proxy: {
                '/api/*': {
                    target: argv.env.mock ? '' : 'https://localhost:43000',
                    secure: false,
                    changeOrigin: true,
                    agent: new agent({
                        maxSockets: 100,
                        keepAlive: true,
                        maxFreeSockets: 10,
                        keepAliveMsecs: 100000,
                        timeout: 6000000,
                        freeSocketTimeout: 90000, // free socket keepalive for 90 seconds
                    }),
                    onProxyRes: (proxyRes) => {
                        var key = 'www-authenticate'
                        proxyRes.headers[key] =
                            proxyRes.headers[key] && proxyRes.headers[key].split(',')
                    },
                },
            },
        },
        devtool: 'cheap-module-source-map',
        plugins: [
            new webpack.HotModuleReplacementPlugin(), // enable HMR globally
            new webpack.DefinePlugin({
                'process.env.appVersion': JSON.stringify(package.version),
                'process.env.isMockMode': JSON.stringify(argv?.env?.mock),
                'process.env.isDevelopment': true,
            }),
        ],
    })
}

How can I solve this issue? I cannot use http://localhost:43000 because my backend uses SSL. Ahy help would be greatly appreciated!

Answer 1

Protocol "https:" not supported. Expected "http:"

The error is thrown by agent . It is necessary to use https :

agent: new agent.HttpsAgent({
    maxSockets: 100,
    keepAlive: true,
    maxFreeSockets: 10,
    keepAliveMsecs: 100000,
    timeout: 6000000,
    freeSocketTimeout: 90000, // free socket keepalive for 90 seconds
}),