Update Post throwing CORS Preflight error against ArcGis Online Rest Endpoint

434
3
07-08-2021 04:05 PM
Neberu
by
New Contributor

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.

Tags (3)
0 Kudos
3 Replies
AndyGup
Esri Regular Contributor

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-ar...

0 Kudos
AndyGup
Esri Regular Contributor

Oh, forgot to add that you might also take a look at this library: https://github.com/Esri/arcgis-rest-js/tree/master/packages/arcgis-rest-feature-layer 

BenElan
Esri Contributor

I second Andy's suggestion to use ArcGIS REST JS. Here is the API Reference for updateFeatures:

https://esri.github.io/arcgis-rest-js/api/feature-layer/updateFeatures/

0 Kudos