Webpack-Dev-Server 构造不正确的 SockJS： "An insecure SockJS connection may not be initiated from a page lo

Question

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

我正在构建一个使用Nginx作为代理的 Web 应用程序，使用React作为 Web 的前端，GoLang作为我的后端 API。整个应用程序在 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,
},

然后我使用以下命令重建了我的 Dockerdocker-compose -f development.docker-compose.yml up --build

并试图访问https://127.0.0.1:8000/它是否解决了我的问题。不幸的是，在成功构建Docker-compos之后，我从Nginx得到了404 Not Found。

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

nginxbetteralpha | 2019/12/30 20：40：02 [emerg] 1#1：在上游 "goapi：3000" 中找不到主机/etc/nginx/conf.d/dev_better_alpha.conf：2 恩金克斯贝特阿尔法 |nginx：在上游 "goapi：3000" 中找不到 [emerg] 主机/etc/nginx/conf.d/dev_better_alpha.conf：2

我的开发合作伙伴尝试了以下解决方案 在这里找到 Docker 网络 - nginx：在上游找不到 [emerg] 主机，但没有一个解决问题。

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

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;
}

任何帮助都将受到热烈的赞赏!!

Answer 1

您的配置似乎存在一些问题-

1. 您是否打算通过 HTTPS 连接到您的应用程序？㞖 看起来您没有为 HTTPS 配置 Nginx - 即没有 证书等有关如何执行此操作的良好摘要，请查看 Nginx docs
2. 您正在尝试通过以下方式连接到应用程序 端口 8000，但 Nginx 未设置为侦听该端口。你只有 让它侦听端口 80。

首先尝试解决这些问题，然后用结果更新我们。