GetFeatureInfo fails on 502 Bad Gateway

[alturium]

Loaded a WMS map layer ("geonames") but when using the Identify plug-in attempted a GetFeatureInfo (via MapInfo.js) and via axios that generated an axios exception with status: 502 statusText: Bad Gateway.

When I execute a curl command (minus the mapstore proxy), the request works. I'm not sure how to proceed in debugging this further (peer into axios?) and perhaps look into the proxy setup.

Here are a few artifacts:
Capturing the XHR header from chrome debugging:

GET /mapstore/proxy/?url=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttp%2F172.18.36.22%3A8080%2Fgeoserver%2FGeoNames%2Fwms%3Fservice%3DWMS%26version%3D1.1.1%26request%3DGetFeatureInfo%26format%3Dimage%252Fpng%26query_layers%3DGeoNames%253Ageoname%26layers%3DGeoNames%253Ageoname%26info_format%3Dtext%252Fplain%26feature_count%3D10%26x%3D51%26y%3D51%26srs%3DEPSG%253A3857%26height%3D101%26width%3D101%26bbox%3D-10380363.420268986%252C4469769.88451811%252C-10379398.402786884%252C4470734.90200021 HTTP/1.1
Host: localhost:8081
Connection: keep-alive
Accept: application/json, text/plain, /
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36
Referer: http://localhost:8081/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8

This worked: running via curl (minus proxy part):

curl "http://172.18.36.22:8080/geoserver/GeoNames/wms?service=WMS&version=1.1.1&request=GetFeatureInfo&format=image%2Fpng&query_layers=GeoNames%3Ageoname&layers=GeoNames%3Ageoname&info_format=text%2Fplain&feature_count=10&x=51&y=51&srs=EPSG%3A3857&height=101&width=101&bbox=-10380363.420268986%2C4469769.88451811%2C-10379398.402786884%2C4470734.90200021"

And returned response (plain/text):

name = Downtown Airport
asciiname = Downtown Airport
alternatenames = KOLR
latitude = 37.2231
longitude = -93.24398
fclass = S
fcode = AIRP
country = US
cc2 = null
admin1 = MO
admin2 = 077
admin3 = null
admin4 = null
population = 0
elevation = 419
gtopo30 = 421
timezone = America/Chicago
moddate = 2014-10-07
the_geom = [GEOMETRY (Point) with 1 points]

Thanks ahead of time!

[alturium]

update: I just running the mapstore2 without a mapstore setup, and I am reading up on the docs, so perhaps the localConfig.json is correct, but I am missing a running proxy.... such as the http-proxy...

localConfig.json

{
    "proxyUrl": "/mapstore/proxy/?url=",
    "geoStoreUrl": "/mapstore/rest/geostore",
    "printUrl": "http://demo.geo-solutions.it/geoserver/pdf/info.json",
    "bingApiKey": "AhuXBu7ipR1gNbBfXhtUAyCZ6rkC5PkWpxs2MnMRZ1ZupxQfivjLCch22ozKSCAn",
    "translationsPath": "./MapStore2/web/client/translations",
    "plugins": {
        "desktop": ["Map", "Toolbar", "MousePosition", "ScaleBox", "BackgroundSwitcher", "TOC", "Identify"]
    }
}

[mbarto]

When running in devel mode (npm start) you need a running proxy to access external services via GetFeatureInfo.
To have the MapStore2 proxy running, you have to build the MapStore2 war (./build.sh) and run it under a Java container (e.g. Tomcat).
Then you have to update webpack.config.js to use it (look at the devServer / proxy section)

For example if you run Tomcat on localhost, port 8080:

devServer: {
proxy: [..., {
path: new RegExp("/mapstore/proxy(.*)"),
rewrite: rewriteUrl("/mapstore/proxy$1"),
host: "localhost:8080",
target: "http://localhost:8080"
}]
*

[alturium]

Thank you for your quick reply! I'm pretty sure that is the issue. Since the WMS calls were working I had thought the query should also work.

[alturium]

Still having issues but getting closer.

1. Installed tomcat 8.5.8
2. copied mapstore.war (built with maven 3.3.9)
3. tomcat running at :8080
4. updated webpack.config.js to include

host "localhost:8080",
target:"http://localhost:8080"

See the request/reponse below (the second modified to :8080 vice :8081). I notice that even though the webpack.config.js was modified to :8080 then header request says :8081. Tomcat is running on port 8080.

I'm not sure if the request is correct, if my configuration is setup correctly, or if the mapstore\proxy needs additional setup info. I've browsed the mapstore wiki but haven't gleaned any clues. I haven't tried debugging the mapstore/proxy yet.

Thank you for the help!

Request (Chrome debugger, reformatted):

GET /mapstore/proxy/?url=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttp%2F172.18.36.22%3A8080%2Fgeoserver%2FGeoNames%2Fwms%3Fservice%3DWMS%26version%3D1.1.1%26request%3DGetFeatureInfo%26format%3Dimage%252Fpng%26query_layers%3DGeoNames%253Ageoname%26layers%3DGeoNames%253Ageoname%26info_format%3Dtext%252Fplain%26feature_count%3D10%26x%3D51%26y%3D51%26srs%3DEPSG%253A3857%26height%3D101%26width%3D101%26bbox%3D-9561890.053334123%252C4611980.975642681%252C-9554169.913477318%252C4619701.115499483 HTTP/1.1
Host: localhost:8081
Connection: keep-alive
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36
Referer: http://localhost:8081/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8

returns

<title>Apache Tomcat/8.5.8 - Error report</title><style type="text/css">H1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} H2 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;} H3 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;} BODY {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;} B {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} P {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;}A {color : black;}A.name {color : black;}.line {height: 1px; background-color: #525D76; border: none;}</style>

HTTP Status 404 - /http_proxy/proxy/

type Status report

message /http_proxy/proxy/

description The requested resource is not available.

---

Apache Tomcat/8.5.8

when I modify the URL from 8081 to 8080 and run curl:

curl "localhost:8080/mapstore/proxy/?url=http://172.18.36.22:8080/geoserver/GeoNames/wms?service=WMS&version=1.1.1&request=GetFeatureInfo&format=image%2Fpng&query_layers=GeoNames%3Ageoname&layers=GeoNames%3Ageoname&info_format=text%2Fplain&feature_count=10&x=51&y=51&srs=EPSG%3A3857&height=101&width=101&bbox=-9561890.053334123%2C4611980.975642681%2C-9554169.913477318%2C4619701.115499483"

returns reponse:

<title>Apache Tomcat/8.5.8 - Error report</title><style type="text/css">H1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} H2 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;} H3 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;} BODY {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;} B {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} P {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;}A {color : black;}A.name {color : black;}.line {height: 1px; background-color: #525D76; border: none;}</style>

HTTP Status 403 - Request Type is not among the ones allowed for this proxy

type Status report

message Request Type is not among the ones allowed for this proxy

description Access to the specified resource has been forbidden.

---

Apache Tomcat/8.5.8

[mbarto]

Are you sure you are using a war from MapStore2? The /http_proxy/proxy/ path looks like the one used by MapStore1, also the 403 error looks like generated by a misconfigured (or not at all configured) proxy. The MapStore2 standard proxy should allow those kind of requests.

Are you using this in your webpack.config.js ?

  {
        path: new RegExp("/mapstore/proxy(.*)"),
        rewrite: rewriteUrl("/mapstore/proxy$1"),
        host: "localhost:8080",
        target: "http://localhost:8080"
    }

[alturium]

Okay, almost there...

I modified the config.json for the mapstore\proxy running in tomcat, to add the same layers present in the client.

The webpack.config.js has the values you specified above, but it looks like the translation is not working correctly.

The request is:
http://localhost:8081/mapstore/proxy/?url=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttp%2F172.18.36.22%3A8080%2Fgeoserver%2FGeoNames%2Fwms%3Fservice%3DWMS%26version%3D1.1.1%26request%3DGetFeatureInfo%26format%3Dimage%252Fpng%26query_layers%3DGeoNames%253Ageoname%26layers%3DGeoNames%253Ageoname%26info_format%3Dtext%252Fplain%26feature_count%3D10%26x%3D51%26y%3D51%26srs%3DEPSG%253A3857%26height%3D101%26width%3D101%26bbox%3D-13053380.631344404%252C4794206.851074537%252C-13037940.3516308%252C4809647.130788144

and the response is 404 as above. But when changed 8081 to 8080, results were returned!

http://localhost:8080/mapstore/proxy/?url=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttp%2F172.18.36.22%3A8080%2Fgeoserver%2FGeoNames%2Fwms%3Fservice%3DWMS%26version%3D1.1.1%26request%3DGetFeatureInfo%26format%3Dimage%252Fpng%26query_layers%3DGeoNames%253Ageoname%26layers%3DGeoNames%253Ageoname%26info_format%3Dtext%252Fplain%26feature_count%3D10%26x%3D51%26y%3D51%26srs%3DEPSG%253A3857%26height%3D101%26width%3D101%26bbox%3D-13053380.631344404%252C4794206.851074537%252C-13037940.3516308%252C4809647.130788144

So it appears that even though the webpack.config.js (running use npm start - there is another webpack.config.js at \Mapstore2 - which was also updated), the request is not formatted correctly.

webpack.config.js:

var path = require("path");
var DefinePlugin = require("webpack/lib/DefinePlugin");
var NormalModuleReplacementPlugin = require("webpack/lib/NormalModuleReplacementPlugin");
var NoErrorsPlugin = require("webpack/lib/NoErrorsPlugin");

var rewriteUrl = function(replacePath) {
    return function(req, opt) {  // gets called with request and proxy object
        var queryIndex = req.url.indexOf('?');
        var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";
        req.url = req.path.replace(opt.path, replacePath) + query;
    };
};

module.exports = {
    entry: {
        'webpack-dev-server': 'webpack-dev-server/client?http://0.0.0.0:8081', // WebpackDevServer host and port
        'webpack': 'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
        'nomsmapapp': path.join(__dirname, "js", "app")
    },
    output: {
        path: path.join(__dirname, "dist"),
        publicPath: "/dist/",
        filename: "[name].js"
    },
    plugins: [
        new DefinePlugin({
            "__DEVTOOLS__": true
        }),
        new NormalModuleReplacementPlugin(/leaflet$/, path.join(__dirname, "MapStore2", "web", "client", "libs", "leaflet")),
        new NormalModuleReplacementPlugin(/openlayers$/, path.join(__dirname, "MapStore2", "web", "client", "libs", "openlayers")),
        new NormalModuleReplacementPlugin(/proj4$/, path.join(__dirname, "MapStore2", "web", "client", "libs", "proj4")),
        new NoErrorsPlugin()
    ],
    resolve: {
      extensions: ["", ".js", ".jsx"]
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style!css'},
            { test: /\.less$/, loader: "style!css!less-loader" },
            { test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, loader: "url-loader?mimetype=application/font-woff" },
            { test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/, loader: "file-loader?name=[name].[ext]" },
            { test: /\.(png|jpg|gif)$/, loader: 'url-loader?name=[path][name].[ext]&limit=8192'}, // inline base64 URLs for <=8k images, direct URLs for the rest
            {
                test: /\.jsx?$/,
                exclude: /ol\.js$/,
                loader: "react-hot",
                include: [path.join(__dirname, "js"), path.join(__dirname, "MapStore2", "web", "client")]
            }, {
                test: /\.jsx?$/,
                exclude: /ol\.js$/,
                loader: "babel-loader",
                include: [path.join(__dirname, "js"), path.join(__dirname, "MapStore2", "web", "client")]
            }
        ]
    },
    devServer: {
        proxy: [{
            path: new RegExp("/mapstore/rest/geostore/(.*)"),
            rewrite: rewriteUrl("/geostore/rest/$1"),
            host: "mapstore.geo-solutions.it",
            target: "http://mapstore.geo-solutions.it"
        }, {
            path: new RegExp("/mapstore/proxy(.*)"),
            rewrite: rewriteUrl("/http_proxy/proxy$1"),
            host: "localhost:8080",
            target: "http://localhost:8080"
        }]
    },

    devtool: 'inline-source-map',
    debug: true
};

[mbarto]

Hi,
the rewrite clause is wrong:

replace

rewrite: rewriteUrl("/http_proxy/proxy$1"),

with

rewrite: rewriteUrl("/mapstore/proxy$1"),

[alturium]

Its working! Thanks for the help!

Recommend closing this issue.