Webpack-Dev-Server构造了不正确的SockJS：“可能无法通过HTTPS加载的页面启动不安全的SockJS连接”

Question

现在我已经为这个尴尬的问题苦苦挣扎了一个多星期，无法解决。任何帮助将不胜感激！

我正在构建一个使用Nginx作为代理的Web应用程序，对于Web的前端使用React，对于我的后端API使用GoLang。整个应用程序都在Docker（版本19.03.5）上运行。

我运行npm install安装了一些新软件包并转到https://127.0.0.1:8000/开始构建应用后，出现了空白的空白屏幕，并且在我的[[Chrome开发者工具中出现新错误：]

sockjs.js:689 Uncaught Error: SecurityError: An insecure SockJS connection may not be initiated from a page loaded over HTTPS
at new SockJS (sockjs.js:689)
at new SockJSClient (webpack:///(:8000/webpack)-dev-server/client/clients/SockJSClient.js?:39:18)
at initSocket (webpack:///(:8000/webpack)-dev-server/client/socket.js?:20:12)
at Object.eval (webpack:///(:8000/webpack)-dev-server/client?:176:1)
at eval (webpack:///(:8000/webpack)-dev-server/client?:177:30)
at Object../node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:8081 (bundle.cf100e5b1875c7903444.js:9267)
at __webpack_require__ (bundle.cf100e5b1875c7903444.js:727)
at fn (bundle.cf100e5b1875c7903444.js:101)
at eval (webpack:///multi_(:8000/webpack)-dev-server/client?:1:1)
at Object.0 (bundle.cf100e5b1875c7903444.js:10880)

此刻，我被告知将
https：true

添加到我的webpack.config.js中，如下所示：

devServer: {
  contentBase: buildPath,
  inline: false,
  watchContentBase: true,
  compress: true,
  historyApiFallback: true, // any routes will fetch bundle.js file
  disableHostCheck: true, // for nginx proxy
  port: 8081,
  https: true,
},

然后我用以下命令docker-compose -f development.docker-compose.yml up --build重建了我的Docker>
并尝试访问
https://127.0.0.1:8000/
是否解决了我的问题。不幸的是，在成功构建Docker-compose之后，我从Nginx获得了[[404 Not Found

。在Nginx容器中进行少量挖掘之后，我发现以下日志：

nginxbetteralpha | 2019/12/30 20:40:02 [emerg] 1＃1：在/etc/nginx/conf.d/dev_better_alpha.conf:2的上游“ goapi：3000”中找不到主机nginxbetteralpha | nginx：[emerg]主机未在/etc/nginx/conf.d/dev_better_alpha.conf:2的上游“ goapi：3000”中找到]

我的开发伙伴尝试了以下在Docker Networking - nginx: [emerg] host not found in upstream中找到的解决方案，但没有一个解决了问题。

下面您可以查看我的相关配置文件：

webpack.config.js

 module.exports = () => {
    return {
        context: contextPath,
        entry: {
            main: ["@babel/polyfill", "webpack/hot/dev-server", indexJsPath],
        },
        output: {
            // TODO: add this module for css bundle
            // https://webpack.js.org/plugins/mini-css-extract-plugin/
            // https://medium.com/@tomaskoutsky/hey-webpack-can-you-bust-my-cache-21350f951220
            //   filename: "[name].[hash].js",
            filename: "bundle.[hash].js",
            publicPath: "/", // very important otherwise index.html has src="bundle.js" instead of src="/bundle.js" => nginx wont be able to find it in sub paths
            path: buildPath,
        },
        devServer: {
            contentBase: buildPath,
            inline: true,
            watchContentBase: true,
            compress: true,
            historyApiFallback: true, // any routes will fetch bundle.js file
            disableHostCheck: true, // for nginx proxy
            port: 8081,
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    loader: "babel-loader",
                },
                {
                    test: /\.css$/,
                    exclude: [/src/],
                    use: [
                        require.resolve("style-loader"),
                        {
                            loader: require.resolve("css-loader"),
                            options: {
                                importLoaders: 1,
                            },
                        },
                    ],
                },
                {
                    test: /\.css$/,
                    exclude: [/node_modules/],
                    use: [
                        { loader: "style-loader" },
                        {
                            loader: "css-loader",
                            options: {
                                modules: true,
                                url: true,
                                localIdentName: "[local]___[hash:base64:5]", // it has to be same as `generateScopedName` in .babelrc react-css-module config setting !!
                            },
                        },
                        { loader: "postcss-loader" },
                    ],
                },
                {
                    test: /\.(png|jpg|gif|jpeg|svg)$/,
                    use: [
                        {
                            loader: "url-loader",
                            options: {
                                limit: 1000,
                                outputPath: "images",
                                name: "[name]-[hash:6].[ext]",
                            },
                        },
                        {
                            loader: "image-webpack-loader",
                            options: {
                                disable: true, // in dev..
                            },
                        },
                    ],
                },
                {
                    test: /\.(woff|woff2|eot|ttf)$/,
                    loader: "url-loader",
                },
            ],
        },
        plugins: [HTMLWebpackPluginConfig, dotEnvPlugin],
        resolve: {
            extensions: [".js", ".jsx", ".json", ".css"],
        },
    };
};

dev / dev.conf

upstream goapi {
    server goapi:3000;
}

server {
    listen       80;
    server_name  localhost;

    location / {
        proxy_pass http://webpackdevserver:8081;
    }

    location /api {
        # proxy to golang API
        proxy_pass http://goapi;
    }

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        # root   /usr/share/nginx/html;
    }
}

dev / conf.d / dev.conf

upstream goapi {
    server goapi:3000;
}

server {
    # http
    listen 80;
    # server_name  _;
    server_name  localhost;
    location / {
        # redirect any requests to the same URL but on https
        return 301 https://$host$request_uri:8000;
    }
# https://serverfault.com/questions/10854/nginx-https-serving-with-same-config-as-http
#http://nginx.org/en/docs/http/configuring_https_servers.html#single_http_https_server
}

server {
    # https
    listen 443 ssl;
    # server_name  _;
    server_name  localhost;

    # location of the self-signed SSL certificate
    ssl_certificate /usr/share/ssl_certs/cert.pem;
    ssl_certificate_key /usr/share/ssl_certs/key.pem;


    location / {
        proxy_pass http://webpackdevserver:8081;
    }

    location /api {
        # proxy to golang API
        proxy_pass http://goapi;
    }

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        # root   /usr/share/nginx/html;
    }
}

dev / nginx.conf

user  nginx;
worker_processes  2;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

任何帮助都会受到赞赏！

现在我已经为这个尴尬的问题苦苦挣扎了一个多星期，无法解决。任何帮助将不胜感激！我正在构建一个使用Nginx作为代理的Web应用程序，React ...

Answer 1

您是否打算通过HTTPS连接到您的应用程序？如果是这样的话，看起来您没有为HTTPS配置Nginx-即，否证书等。有关如何执行此操作的概述，请查看Nginx docs