0

I work on Angular and I have to use the Geoserver API to publish data located in a spatial database. I tried with PHP Curl and the API worked pretty well. Now I want to use it in my Angular app.
I must precise that Geoserver (version 2.22) is installed on Apache Tomcat (9.0) and all the tools are located in the same server.

Here is my code :

HTML :

<button type="button" (click)="testFct()">OK</button>

TS component file :

  testFct(){
    var layer = 'region'
    this._apiService.PostData(layer)
    .subscribe(data => {
    console.log(data)
      })
 }

Provider file (api.service.ts) :

PostData(layer:any) {

  let authorizationData = 'Basic ' + btoa('user' + ':' + 'password');
  
  const body = '<featureType><name>' + layer + '</name></featureType>';
  
  var options = new HttpHeaders()
  .set('Access-Control-Allow-Origin', '*')
  .set('Content-Type', 'text/xml')
  .set('Authorization', authorizationData);
  
   return this.http.post('http://IP:8080/geoserver/rest/workspaces/MyWorkspace/datastores/MyDatastore/featuretypes', body, { headers: options })

}

When I click on the "OK" button I have CORS Missing Allow Origin problems :

Access to XMLHttpRequest at 'http://IP:8080/geoserver/rest/MyWorkspace/pampas/MyDatastore/bdd/featuretypes' from origin 'http://IP:4201' 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.

In read number of CORS subjects on Stack Overflow or outside, tried many and many things but I'm still getting stuck and a completely lost.

I added these lines in /opt/tomcat/conf/web.xml, restarted Tomcat but nothing changes and I still have this Cors policy error :
Edit : add cors.allowed.headers params and set it to '*'

    <filter>
      <filter-name>CorsFilter</filter-name>
      <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
   <init-param>
       <param-name>cors.allowed.headers</param-name>
       <param-value>*</param-value>
   </init-param>
      <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
      </init-param>
      <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
      </init-param>
    </filter>
    <filter-mapping>
      <filter-name>CorsFilter</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

Edit 2 : If I look at the network part of the browser it says :

POST : blocked : NS_ERROR_DOM_BAD_URI
OPTIONS : blocked : CORS Missing Allow Origin

I know there are many similarly questions on CORS errors but unless I am mistaken I did not find any subject dealing with the use of the Geoserver API in an Angular app .
Could you help me please ? Any help would be greatly appreciatd !

Julien
  • 699
  • 3
  • 14
  • 30
  • Check if you are making the call correctly, This error can means something else also, what is your status code? – Sabir Hossain Dec 22 '22 at 11:55
  • Thanks for your answer. I checked the call manually with CURL and it worked. But how could I do in Javascript/Typescript outside of my Angular app ? – Julien Dec 22 '22 at 12:03
  • 1) You write: _I tried with PHP Curl and the API worked pretty well._ That tells you the server is up, which is good. But since curl isn't subject to the SOP, you should not be surprised to see no CORS errors when you use curl. 2) `Access-Control-Allow-Origin` makes no sense as a request header; you can safely remove it. 3) You'll need to allow request headers `Authorization` and `Content-Type` in your CORS config. – jub0bs Dec 22 '22 at 12:46
  • Thanks for your answer. Ok I'll remove `Access-Control-Allow-Origin`. I'll try to allow request headers but how should I write it in the code ? I suppose it is in the config file /opt/tomcat/conf/web.xml of Tomcat ? – Julien Dec 22 '22 at 12:52
  • @Julien Check out [the documentation](https://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter). `cors.allowed.headers` is right up your alley. Tomcat, alley... get it? :p – jub0bs Dec 22 '22 at 13:12
  • @jub0bs Thanks, ok I checked the documentation and added `cors.allowed.headers` with `Authorization` and `Content-Type` values (see edit) but same error.. – Julien Dec 22 '22 at 14:06
  • does https://stackoverflow.com/questions/68039541/angular-cors-preflight-response-did-not-succeed help? – Ian Turton Dec 22 '22 at 14:36
  • Thanks but not in this case. I managed to create get and post API in Angular with a Node JS backend that allowed Cors. But my goal is now to create a Post API in order to interact to a Tomcat servlet that is Geoserver (I have no Node backend). I made some modifications in the web.xml file to allow Cors but unfortunately with no results – Julien Dec 22 '22 at 14:41

1 Answers1

0

The GeoServer docs (and I think the shipped web.xml) give:

<init-param>
  <param-name>cors.allowed.headers</param-name>
  <param-value>*</param-value>
</init-param>

So I suspect that Angular is sending a header that is not one of Content-Type,Authorization that you have limited it to.

Ian Turton
  • 10,018
  • 1
  • 28
  • 47