Question

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

login.domain.ext
project.domain.ext

现在项目在webpack dev服务器上运行，而login是一个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
＆＃39; .htaccess＆＃39;的旁路部分将所有内容设为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 );
        }
    }
}

Webpack 3代理多个域

1 个答案: