CORS error

[Patrice Pineault]

Hi,

I'm really struggling making CORS working on my environment.

Here is the error I get in the browser:

Access to XMLHttpRequest at 'http://localhost:8080/geoserver/rest/workspaces' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am trying to use the Geoserver's REST API to do a few things on the server from Mapstore using the enhanced Axios lib packaged with Mapstore.

I figured I have to add the Geoserver's URL to the UseCORS array in localConfig. I also enabled CORS in the Geoserver Tomcat9 container (uncommented the two part corresponding to Tomcat in web.xml, according to Geoserver's doc).

Using Curl on CLI, it seems to be OK as it repports Geoserver allowing the Access-Control-Allow-Origin header.

Here is the code related to the Axios request:

var username = 'login';
var password = 'passwd';
var basicAuth = 'Basic ' + btoa(username + ':' + password);

var config = {
   headers: {
     'Content-Type': 'text/xml',
     'Authorization': + basicAuth,
   }
};

const geoserverWorkspaceBaseURL = "http://localhost:8080/geoserver/rest/workspaces";
axios.get(geoserverWorkspaceBaseURL, config).then((response) => {
   console.log(response.data);
});

[Lorenzo Natali]

Hi, 

CORS deny to the browser to do cross requests between different domains / ports. They are limitation applied only to the browser, Curl or any other utility will not have CORS problems.

For local dev environment, like the yours seems to be, the easier way to make request work is to avoid CORS at all and use the webpack dev server to proxy geoserver, so you can easely use it.  

Adding an entry like this in `buildConfig.js` proxy configuration or in your project config)

proxy: {

[...]

"/geoserver": {

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

secure: false,

headers: {

host: "localhost:8080"

}

},

This will make the local dev server to proxy your geoserver on port localhost:8081/geoserver , skipping every CORS problem. 

[Lorenzo Natali]

to be more precise, "same origin policy deny to the browser to do cross requests between different domains / ports", not CORS.

CORS is a mechanism to indicate to the browser that the domain is allowed.  

[Patrice Pineault]

Hi, thanks a lot for your input!

I still can't figure out why I can't make it to work. Indeed you guessed right, it's a local dev environment (it's a MapStore Project if that matters).

Mapstore is running on localhost:8081 (npm start)

Geoserver is running on localhost:8080/geoserver/ (Tomcat9)

Mapstore backend is also running on localhost:8080/mapstore/ (Tomcat9) if that matters. Though it works fine.

• I removed Geoserver from the useCORS config array.

• I tried to use "target: "http://localhost:8080/geoserver" and/or "'/geoserver/': {" '/rest/geoserver': {, etc.
  
• I tried removing the headers section
• Different combinations of the above
  

I recompiled Mapstore everytime I change something.

I get either this error:

GET http://localhost:8081/proxy/?url=http%3A%2F%2Flocalhost%3A8080%2Fgeoserver%2Frest%2Fworkspaces 403 (Forbidden)

I am out of ideas.

Here is the relevant part of ../MapStore2/build/buildConfig.js :

devServer: devServer || {
   publicPath: "/dist/",
   proxy: {
     '/rest/': {
        target: "http://localhost:8080/mapstore" // port 8080, mapstore path
    },
    '/proxy': {
        target: "http://localhost:8080/mapstore", // port 8080, mapstore path
        secure: false
        },
    '/geoserver': {
        target: "http://localhost:8080/geoserver",

        secure: false,
        headers: {
            host: "localhost:8080"
        }
       },
    }

},

[Patrice Pineault]

I took a look quickly at the http-proxy code and I think "geoserver" is simply not allowed, thus returning the 403 error.

According to these configs (https://github.com/geosolutions-it/http-proxy/blob/master/src/main/resources/proxy.properties):

reqtypeWhitelist.capabilities = .*[Gg]et[Cc]apabilities.*
reqtypeWhitelist.featureinfo = .*[Gg]et[Ff]eature[Ii]nfo.*
reqtypeWhitelist.csw = .*csw.*
reqtypeWhitelist.geostore = .*geostore.*

reqtypeWhitelist.generic = (.*exist.*)|(.*servicebox.*)|(.*pdf.*)|(.*map.*)|(.*d.*)|(.*ows.*)

[Lorenzo Natali]

Hi,

with dev server proxy configured to map /geoserver/, now GeoServer should be accessible also at  http://localhost:8081/geoserver/.

You can use that address (or the relative /geoserver/) to configure catalog and so layers, and skip completely the other proxy.