如何修复 webpack devServer 代理的 ETIMEDOUT（忽略企业代理？）答案

【问题标题】：How to fix ETIMEDOUT of webpack devServer proxy (ignoring corporate proxy?)如何修复 webpack devServer 代理的 ETIMEDOUT（忽略企业代理？）
【发布时间】：2019-11-07 11:13:40
【问题描述】：

在我的本地开发环境中，我使用 webpack devServer.proxy 将 API 请求代理到 https://.atlassian.net/rest/api/2 以抑制 CORS 问题。

但请求超时

[HPM] Error occurred while trying to proxy request /project from localhost:9008 to https://<myProject>.atlassian.net/rest/api/2 (ETIMEDOUT) (https://nodejs.org/api/errors.html#errors_common_system_errors)

我想问题是，我在代理后面的公司网络中，要访问互联网，我需要使用代理。代理设置包含在 /etc/profile (MacOS) 中。

当我在同一个 shell 中使用 curl 发出类似的请求时

curl --request GET --url 'https://<myProject>.atlassian.net/rest/api/2/project' --header 'Authorization: Basic <someBase64EncodedString>' --header 'Accept: application/json'

我得到了一个有效的答案（我可以访问的所有项目的列表）。使用 webpack-dev-server 运行相同的请求超时（见上文）。

这是我的 webpack devServer.proxy 配置：

'/api/*': {
            target: 'https://<myProject>.atlassian.net/rest/api/2',
            headers: {
                Authorization: 'Basic <someBase64EncodedString>',
                Accept: "application/json"
            },
            secure: false,
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            },
            logLevel: 'debug'
        }

知道为什么 webpack 会忽略 /etc/profile 中的 https_proxy 吗？

有什么想法吗？

【问题讨论】：

标签： webpack proxy webpack-dev-server

【解决方案1】：

由于我没有找到有关如何代理 devServer.proxy 的任何信息，因此我找到了一种解决方法：

我们需要使用另一个本地代理通过公司代理发送请求。这可以通过运行 httpServer (localhost:9009) 并获取我想发送到https://myProject.atlassian.net/rest/api/2 的请求的 nodejs 脚本来完成。然后，此 httpServer 会将我的请求发送到公司代理。 Webpack.devServer.proxy 配置现在看起来像这样：

'/api/*': {
        target: 'http://localhost:9009',
        headers: {
            Authorization: 'Basic <someBase64EncodedString>',
            Accept: "application/json"
        },
        secure: false,
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        },
        logLevel: 'debug'
    }

httpServer "postproxy.js" 脚本可能如下所示：

var http = require('http');

var request = require('./node_modules/request');
var fs = require('fs');
var proxy = "<corporate proxy url>";
var api = "https://<myProject>.atlassian.net/rest/api/2/";
var hopper = "https://<myProject>.atlassian.net/rest/greenhopper/1.0";

http.createServer(function (reqorg, resorg) {

if (reqorg.method == 'POST'){
    var bodyorg = '';
    reqorg.on('data', function (data) {
        bodyorg += data;
    });
    reqorg.on('end', function () {

        var head = {
            "content-type" : "application/json",
            "Authorization": reqorg.headers.authorization
        };

        if(reqorg.url.includes("attachment")){
            // Adjusting Head for Attachment Transfer
            head["X-Atlassian-Token"] = "no-check";
            head["content-type"] = "multipart/form-data";

            var content = JSON.parse(bodyorg);
            var buffer = Buffer.from(content.file,'base64');

            var options = {
                headers: head,
                uri: api+reqorg.url,
                formData: {
                    file: {
                        value: buffer,
                        options: {
                            filename: content.filename
                        }
                    }
                },
                method: 'POST'
            }

            request(options, function(err, response, body){
                resorg.writeHead(200, {'Content-Type': 'application/json'});
                resorg.end(body);
            });

        } else {

            request.post({
                headers: head,
                url: api+reqorg.url,
                proxy: proxy,
                body: bodyorg
            }, function(error, response, body){
                resorg.writeHead(200, {'Content-Type': 'application/json'});
                resorg.end(body);
            });

        }
    });
} else if (reqorg.method == 'GET') {
    request.get({
        headers: {
            'content-type' : 'application/json',
            'Authorization': reqorg.headers.authorization
        },
        url: api + reqorg.url
    }, function (error, response, body) {
        resorg.writeHead(200, {'Content-Type': 'application/json'});
        resorg.end(body);
    })
} else if (reqorg.method == 'DELETE') {
    request.delete({
        headers: {
            'content-type' : 'application/json',
            'Authorization': reqorg.headers.authorization
        },
        url: api + reqorg.url
    }, function (error, response, body) {
        resorg.writeHead(200, {'Content-Type': 'application/json'});
        resorg.end(body);
    });
} else if (reqorg.method == 'PUT') {
    var bodyorg = '';
    reqorg.on('data', function (data) {
        bodyorg += data;
    });
    reqorg.on('end', function () {
        request.put({
            headers: {
                'content-type' : 'application/json',
                'Authorization': reqorg.headers.authorization
            },
            url: hopper+reqorg.url,
            proxy: proxy,
            body: bodyorg
        }, function(error, response, body){
            resorg.writeHead(200, {'Content-Type': 'application/json'});
            resorg.end(body);
        });
    });
}

}).listen(9009);

不要忘记在 package.json 中启动它：

"scripts": {
    "start": "webpack-dev-server --mode development | npm run proxy",
    "proxy": "node postproxy.js"
},

【讨论】：