Webpack 3 代理多个域

Question

我正在尝试使用多个域为 webpack-dev-server 设置代理。我们的系统是这样工作的:

• 登录.domain.ext
• project.domain.ext

现在项目在 webpack 开发服务器上运行，而登录是一个 PHP 后端，可以在开发机器上运行。

我设法设置了一个代理配置以重定向到 SSL 登录并捕获所有返回重定向，以便我可以重新添加端口 8080。

但是 webpack 似乎忽略了域，现在就像将所有内容代理到登录项目一样。

将 disableHostCheck 设置为 false 会产生一个错误，登录域 nog 是一个有效的主机。

我在主机名代理上找不到任何内容，我看到的所有配置都是关于路径代理的。但我无法想象自己是唯一一个拥有这样设置的人。

这是开发服务器配置

import { configPath } from "../vars/paths.config";

const webpackMerge = require('webpack-merge');
const webpack = require('webpack');
import { commonConfig } from './common.config';

const fs = require('fs');

export let developmentConfig;

developmentConfig = {
    devServer: {
        historyApiFallback: true,
        public : 'project.domain.ext.dev1:8080',
        disableHostCheck: true,
        https: {
            key: fs.readFileSync( configPath + '/resources/ssl/san_domain_com.key' ),
            cert: fs.readFileSync( configPath + '/resources/ssl/san_domain_com.crt-extensions' )
        },
        stats: {
            colors: true
        },
        proxy: {
            "https://login.domain.ext.dev1:8080/": {
                target: "https://login.domain.ext.dev01",
                secure: false,
                changeOrigin: true,
                onProxyReq: relayRequestHeaders,
                onProxyRes: relayResponseHeaders
            }
        },
        hot: true,
        open: true,
        progress: true
    },
    plugins : [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    ]
};
developmentConfig = webpackMerge( commonConfig, developmentConfig );

function relayRequestHeaders(proxyReq, req) {}

function relayResponseHeaders(proxyRes, req, res) {
    if (proxyRes.headers && proxyRes.headers.location) {
        let expression = new RegExp('https://(project\\.(domain\\.ext|alt-domani\\.ext)\\.dev1)/', 'i');
        let match = proxyRes.headers.location.match( expression );
        if (match) {
            proxyRes.headers.location = proxyRes.headers.location.replace(match[1], match[1] + ':8080');
            res.append( 'location', proxyRes.headers.location );
        }
    }
}

Answer 1

我想通了，你可以用

• 路由域的路由器
• onProxyRes 用于更改响应重定向 header
• '.htaccess' 的绕过部分将所有内容样式化为 index.html

这是我最终的代理配置

/**
 * Proxy guide at:
 *    https://github.com/chimurai/http-proxy-middleware
 *    https://github.com/chimurai/http-proxy-middleware/tree/master/recipes
 */
const domains = [
    'domain.ext',
    'domain2.ext'
];

const domainPrefixes = [
    'api',
    'admin',
    'login'
];

let routedRoutes = {};
domains.map( function( domain ) {
    domainPrefixes.map( function( prefix ) {
        routedRoutes[ prefix + '.' + domain + ':8080' ] = 'https://' + prefix + '.' + domain + ':443'
    } )
} );

export const devServerProxyConfig = {
    devServer: {
        disableHostCheck: true,
        proxy: {
            "/api/": {
                target: "https://api.domain.ext/",
                secure: false,
                changeOrigin: true,
                pathRewrite: {
                    '/api': ''
                }
            },
            "https://interface.domain.ext:8080": {
                target: "https://interface.domain.ext:8080",
                secure: false,
                changeOrigin: true,
                bypass: bypassFunction,
                onProxyReq: relayRequestHeaders,
                onProxyRes: relayResponseHeaders,
                router: routedRoutes
            },
        }
    }
};

/**
 * Proxy bypass function to bypass request to interface.domain.ext back to /index.html
 *
 * @param req
 * @param res
 * @param proxyOptions
 * @returns {string}
 */
function bypassFunction(req, res, proxyOptions) {
    if (req.headers && req.headers.host) {
        let expression = new RegExp('(my\\.(' + domains.join('|').replace(new RegExp('\\.', 'gi'), '\\.') + '))', 'i');
        let match = req.headers.host.match( expression );
        if (match && match.length > 0) {
            return '/index.html';
        }
    }
}


/**
 * Adjust request headers before send to script
 * @param proxyReq
 * @param req
 */
function relayRequestHeaders(proxyReq, req) {}


/**
 * Adjust response headers before send to browser
 * @param proxyRes
 * @param req
 * @param res
 */
function relayResponseHeaders(proxyRes, req, res) {
    if (proxyRes.headers && proxyRes.headers.location) {
        // my is not in the prefixes
        let expression = new RegExp('https://(((my|' + domainPrefixes.join('|') + ')\\.(' + domains.join('|').replace(new RegExp('\\.', 'gi'), '\\.') + '))(:443)?)/', 'i');
        let match = proxyRes.headers.location.match( expression );
        if (match && match.length > 0) {
            // match[0] is full url
            // match[1] is url including port (if set)
            // match[2] is url excluding port
            // match[3] is domain prefix
            // match[4] is domain
            // match[5] is port if set
            proxyRes.headers.location = proxyRes.headers.location.replace(match[1], match[2] + ':8080');
            res.append( 'location', proxyRes.headers.location );
        }
    }
}