首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何将请求代理到websocket API?

如何将请求代理到websocket API?
EN

Stack Overflow用户
提问于 2018-07-01 13:29:00
回答 1查看 583关注 0票数 0

我正在尝试使用webpack-serve设置一个开发环境来为生成的前端文件(一个react应用程序)提供服务,并将代理websocket请求发送到路径/api到一个单独的进程。

另一个进程监听端口5000webpack-serve监听端口5001

然而,与其他进程的连接在建立后不久(可能立即)就断开了(其他进程记录了连接/断开,但浏览器从未在开发工具的网络选项卡中显示成功连接),并且我从浏览器中的WebSocket连接得到代码1006 (但没有错误消息)。

我向webpack-serve添加了基本身份验证层,以便对/的请求将触发浏览器请求凭据,然后凭据也将发送到/api请求,因为其他过程需要基本身份验证。

我需要知道我做错了什么。

我的webpack.config.js

代码语言:javascript
复制
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'
    }
};
EN

回答 1

Stack Overflow用户

发布于 2018-07-02 01:40:16

结果,我不得不将以下内容添加到我的proxy() arg对象中:

代码语言:javascript
复制
auth: 'admin:password', ws: true
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51120663

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档