我正在尝试使用webpack-serve设置一个开发环境来为生成的前端文件(一个react应用程序)提供服务,并将代理websocket请求发送到路径/api到一个单独的进程。
另一个进程监听端口5000,webpack-serve监听端口5001。
然而,与其他进程的连接在建立后不久(可能立即)就断开了(其他进程记录了连接/断开,但浏览器从未在开发工具的网络选项卡中显示成功连接),并且我从浏览器中的WebSocket连接得到代码1006 (但没有错误消息)。
我向webpack-serve添加了基本身份验证层,以便对/的请求将触发浏览器请求凭据,然后凭据也将发送到/api请求,因为其他过程需要基本身份验证。
我需要知道我做错了什么。
我的webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const convert = require('koa-connect');
const history = require('connect-history-api-fallback');
const proxy = require('http-proxy-middleware');
const auth = require('koa-basic-auth');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
devtool: 'source-map',
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'src')
],
extensions: ['.jsx','.scss','.js']
},
plugins: [
new MiniCssExtractPlugin({
filename: "bundle.css"
})
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: { discardComments: { removeAll: true } },
})
]
},
module: {
rules: [
{
test: /\.(jsx?)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.(s?[ca]ss)$/,
use: [{ loader: MiniCssExtractPlugin.loader, },
{ loader: 'css-loader', },
{ loader: 'postcss-loader', options: {
plugins: function () {
return [
require('precss'),
require('autoprefixer')
];
}
} },
{ loader: 'sass-loader', options: {
sourceMap: true
} }]
}
]
},
serve: {
content: 'dist',
add: (app, middleware, options) => {
app.use(convert(proxy('/api', { target: 'ws://localhost:5000' })));
app.use(convert(history()));
app.use(async (ctx, next) => {
try {
await next();
} catch (err) {
if (401 == err.status) {
ctx.status = 401;
ctx.set('WWW-Authenticate', 'Basic');
ctx.body = "can't haz that";
} else {
throw err;
}
}
});
app.use(auth({ name: 'admin', pass: 'password' }));
middleware.webpack();
middleware.content();
},
clipboard: false,
open: true,
port: 5001,
host: 'rrw.myhost.com'
}
};发布于 2018-07-02 01:40:16
结果,我不得不将以下内容添加到我的proxy() arg对象中:
auth: 'admin:password', ws: truehttps://stackoverflow.com/questions/51120663
复制相似问题