CORS ERROR with own WMS GeoServer layers

Question

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>

Answer 1

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.