GeoServer, OpenLayers, Tomcat,

Question

Access to XMLHttpRequest at 'http://localhost:8080/geoserver/decuong_doan/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=decuong_doan%3Aho_chi_minh_quan&STYLES=&LAYERS=decuong_doan%3Aho_chi_minh_quan&INFO_FORMAT=application%2Fjson&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A3405&WIDTH=101&HEIGHT=101&BBOX=106.5312897896764%2C10.584902670383462%2C106.72903557538959%2C10.782648456096654' from origin 'null' 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.

How can I resolve this problem? I write code in order to make a Web GIS-based on GeoServer and OpenLayers. But when I get features of layer I can't do it. This below is this code get features:

map.on('singleclick', function (evt) {
document.getElementById('info').innerHTML = "Nhìn thấy dòng này thì làm lại đi :) !!!";
var view = map.getView();
var viewResolution = view.getResolution();
var source = hcm.getSource();
var url = source.getFeatureInfoUrl(
evt.coordinate, viewResolution, view.getProjection(),
{ 'INFO_FORMAT': 'application/json', 'FEATURE_COUNT': 50 });
if (url) {
$.ajax({
type: "POST",
url: url,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (n) {
var content = "<table>";
for (var i = 0; i < n.features.length; i++) {
var feature = n.features[i];
var featureAttr = feature.properties;
content += "<tr><td>Tên quận:" + featureAttr["name_2"]
+ "</td><td>Số hiệu quận:" + featureAttr["id_2"]
+"</td></tr>"
}
content += "</table>";
$("#info").html(content);
}
});
}
});

Answer 1

You need to enable CORS in your Tomcat, simply added to $CATALINA_HOME/conf/web.xml the following lines:

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

and then restart tomcat.

You can test that it works by making a query like:

curl -v -H "Origin: http://example.com" http://localhost:8080/geoserver/wfs\?service\=WFS\&version\=2.0.0\&request\=GetFeature\&typenames\=sf:bugsites\&filter\=%3Cfes:Filter%20xmlns:fes\=%22http://www.opengis.net/fes/2.0%22%3E%3Cfes:ResourceId%20rid\=%22bugsites.3%22/%3E%3C/fes:Filter%3E