I'm trying to get WMS layer as a tile layer via "tileLoadFunction" in OL v6.14.1 in reactjs but when I run below code I will get CORS error message:
map.addLayer(
new TileLayer({
source:new TileWMS({
url:`http://194.105.111.10:8080/geoserver/${selectedLayer[i].datastore}/wms`,
visible:true,
projection:'EPSG:4326',
params:{'LAYERS':layerName,'TILED': true},
serverType:'geoserver',
tileLoadFunction:function(image, src) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.open('GET', src);
xhr.setRequestHeader("Access-Control-Allow-Origin","http://194.105.111.10:3000")
xhr.setRequestHeader('Authorization', 'Bearer f5711f9d-aa2d-4067-p5a9-af913vd16a21');
xhr.onload = function() {
var objectURL = URL.createObjectURL(xhr.response);
image.getImage().onload = function() {
URL.revokeObjectURL(objectURL);
};
image.getImage().src = objectURL;
};
xhr.send();
},
}),
name:`${selectedLayer[i].name}`
}))
GET http://194.105.111.10:8080/geoserver/higU1EU8kM6eJtKaHg14USMyTsQSOpP6/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=higU1EU8kM6eJtKaHg14USMyTsQSOpP6%3Acontour_line&TILED=true&WIDTH=256&HEIGHT=256&CRS=EPSG%3A4326&STYLES=&BBOX=22.5%2C67.5%2C33.75%2C78.75 net::ERR_FAILED
Access to XMLHttpRequest at 'http://194.105.111.10:8080/geoserver/higU1EU8kM6eJtKaHg14USMyTsQSOpP6/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=higU1EU8kM6eJtKaHg14USMyTsQSOpP6%3Acemetery_shape&TILED=true&WIDTH=256&HEIGHT=256&CRS=EPSG%3A4326&STYLES=&BBOX=22.5%2C67.5%2C33.75%2C78.75'
from origin 'http://194.105.111.10:3000' 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 did enable CORS in GeoServer web.xml already, I did enable CORS in Tomcat web.xml also, Furthermore this is my CORS setting in nodejs for expressjs and nodejs routers:
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader("Access-Control-Allow-Origin", "*");
// Request methods you wish to allow
res.setHeader("Access-Control-Allow-Methods", "*");
// Request headers you wish to allow
res.header("Access-Control-Allow-Headers", "*");
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader("Access-Control-Allow-Credentials", true);
// Pass to next layer of middleware
next();
});
app.use(cors({
"origin": "http://194.105.111.10:3000",
"credentials":true,
"preflightContinue": false,
"optionsSuccessStatus": 204
}))
my current CORS setting for GeoServer in /opt/tomcat/webapps/geoserver/WEB-INF/web.xml
<!-- Uncomment following filter to enable CORS in Tomcat. Do not forget the> -->
<filter>
<filter-name>cross-origin</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>
my current CORS setting in Tomcat9.0.58 /opt/tomcat/conf/web.xml
<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>
Although I did enable all CORS configuration in Tomcat and GeoServer and Backend(nodejs) , I will get CORS ERROR
I'm running Reactjs on http://194.105.111.10:3000 my nodejs is running on http://194.105.111.10:3001 I am editing code on remote server (address 194.105.111.10) by vscode
My Laptop OS is LMDE v5 Server Info: OS: Debian 11 x64, Nodejs: 16.x, React 17.x, Tomcat 9.0.58, Java v8, GeoServer 2.20.2,
Authentication method
before I want to add WMS layer to map I created a svg link as a layer preview in layers list table:
I did that by axios in backend(nodejs), below code give me a svg image link I will use that in table layer in firnt-end(Reactjs) (I think sometime this method cause to user login to geoserver in background) :
await axios({
method:"GET",
url:`http://localhost:8080/geoserver/${geoName}/wms?service=WMS&version=1.3.0&request=GetCapabilities&layers=${geoName}:${layerName}&srs=EPSG:4326`,
maxBodyLength: Infinity,
headers:{
"Access-Control-Allow-Origin":"http://194.105.111.10:3000",
'Content-Type':'application/xml',
'Accept':'application/xml',
},
auth:{
username: username,
password: geopass,
},
}).then((response)=>{
// console.log('response get Capabilities ', response.data)
try{
parseString(response.data,async function(err,result){
// console.log('capabilities result ',result["WMS_Capabilities"].Capability[0].Layer[0].Layer)
const getLayerCapability =result["WMS_Capabilities"].Capability[0].Layer[0].Layer
// console.log('getLayerCapability',getLayerCapability)
await getLayerCapability.forEach(element=>{
// log('element ', element)
if(element.Name.includes(layerName)){
// log('element BoundingBox ', element.BoundingBox[1]["$"])
Object.assign(bbox,element.BoundingBox[1]["$"])
}
})
})
}catch(error){
console.error('getSvgLayers Error ', error)
}
}).catch(error=>{
console.error('error ', error)
})
// //
const url=`http://194.105.111.10:8080/geoserver/${geoName}/wms?service=WMS&version=1.3.0&request=GetMap&layers=${geoName}:${layerName}&bbox=${bbox.minx},${bbox.miny},${bbox.maxx},${bbox.maxy}&width=768&height=768&srs=${bbox.CRS}&styles=&format=image/svg&authkey=${authkey}`
return url
I should mention I connected Reactjs to Nodejs via proxy in Reacjs package.json "proxy":"http://194.105.111.10:3001"
