Update Post throwing CORS Preflight error against ArcGis Online Rest Endpoint

Neberu

I have a simple Angular application that I am trying to use to post and update to a feature. However when I send the request I get the error:

Access to XMLHttpRequest at 'https://services.arcgis.com/<appid>/ArcGIS/rest/services/<service name>/FeatureServer/0/updateFeatures' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

This is the code I'm using 

update(id: number, data: string): Observable < any > {
    let params = new HttpParams();
    params = params.append('token', this.authService.userCredential.token);
    params = params.append('f', 'json');
    params = params.append('features', data)

    return this.httpClient.post(`${baseUrl}/updateFeatures`, {params: params}
    );

 

The preflight request is being generated and sent  automatically by the browser so I don't have any direct control over it. Looking at the network request I can see that the response to the preflight is completely lacking the Access-Control-Allow-Headers parameter which I assume is what is causing the error.

AndyGup

Hi @Neberu note, this is not an issue with the ArcGIS API for JavaScript it's an issue with the manually created REST API requests. What's happening is the POST code is adding a header field that is triggering pre-flight. There's nothing in the JS API that would trigger pre-flight.

One recommendation is to build a simple, vanilla JS app against a secured feature layer using the ArcGIS API for JavaScripts applyEdits() method and then compare the headers with your manually generated REST requests. Here's some psuedo-code to help you get started:

              //create feature layer
              const fl = new FeatureLayer({url: ". . .", apiKey:"your_key"});

              // Add feature layer to map
              map.add(fl);

              const editFeature = new Graphic({
                geometry: someValidGeometry,
                attributes: {
                  attribute1: "TBD",
                  attribute2: "TBD"
                }
              });

              const edits = {
                updateFeatures: [editFeature]
              };

              fl.applyEdits(edits)
                .then((editResults) => {
                  console.log("edit results: ", editResults);
                })
                .catch((error) => {
                  console.error("Editing error: ", error);
                })

Additional info:

* apiKey

* https://community.esri.com/t5/arcgis-api-for-javascript/how-to-make-http-requests-work-with-axios-arcgisserver-amp-cors/m-p/1055674