React - 不支持協議“https：”。 預期的“http：”

Question

是的， 我看到了這篇文章，但是我沒有可以編輯以使用https的文件，我的后端是 ASP.NET MVC Core 3.1。

因此，當我的 React 應用程序向 ASP.NET MVC 應用程序發送 API 調用時，它會拋出一個錯誤：

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)

url 看起來像這樣：

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

我們的開發配置文件dev.js如下所示：

// 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,
            }),
        ],
    })
}

我該如何解決這個問題？ 我不能使用http://localhost:43000 ，因為我的后端使用 SSL。非常感謝您的幫助！

Answer 1

不支持協議“https:”。 預期的“http：”

錯誤由agent拋出。 有必要使用https ：

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