0

I am building a weather application. For this I want to use OpenLayers as the base for my application and then I want to be able to add my own made layers from PostGIS with GeoServer to this application.

At the moment I have GeoServer running and made a map with OpenLayers using Node.js, NPM and Parcel.

When I go to localhost:1234 (where this application is shown) I can see the OpenLayers basemap, but I won't show the WMS-layer from GeoServer. I get the following message:

Access to image at 'http://localhost:8080/geoserver/....' from origin 'http://localhost:1234' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have searched all over for the solution, but I think I am missing something. I have already installed CORS on NPM, added CORS to the GeoServer web.xml and the Tomcat web.xml. (Below the code I added.)

Still I get this error. I have been searching for days to solve this, but I just cannot find what I am missing and it is starting to get really frustrating. Anybody ideas?

EDIT: I found that in de code for my application there was the following line of code:

crossOrigin: 'anonymous'

I removed this code, because I am not working with crossOrigin but with CorsFilter in my other code. Now the console displays:

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:8080/geoserver/.... with MIME type text/xml. See https://www.chromestatus.com/feature/5629709824032768 for more details.

END EDIT///

Code added in Tomcat web.xml:

>   <filter>
>     <filter-name>CorsFilter</filter-name>
>     <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
>   </filter>   <filter-mapping>        <filter-name>CorsFilter</filter-name>
>       <url-pattern>/*</url-pattern>   </filter-mapping>
>     <init-param>
>         <param-name>cors.allowed.origins</param-name>
>         <param-value>http://localhost</param-value>
>     </init-param>
>     <init-param>
>         <param-name>cors.allowed.methods</param-name>
>         <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
>     </init-param>
>     <init-param>
>         <param-name>cors.allowed.headers</param-name>
>         <param-value>Content-Type,X-Requested-With,Accept,Authorization,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
>     </init-param>
>     <init-param>
>         <param-name>cors.exposed.headers</param-name>
>         <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
>     </init-param>

Code added to GeoServer web.xml

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
0

I solved the problem. I wasn't with the CORS-config. I had to move my NPM dist folder to the webapps folder of Tomcat. Then the application runs in Tomcat and you do not get a CORS error anymore.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.