topic Re: Update Post throwing CORS Preflight error against ArcGis Online Rest Endpoint in ArcGIS JavaScript Maps SDK Questions

Update Post throwing CORS Preflight error against ArcGis Online Rest Endpoint

Neberu — Thu, 08 Jul 2021 23:05:34 GMT

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.

Re: Update Post throwing CORS Preflight error against ArcGis Online Rest Endpoint

AndyGup — Fri, 09 Jul 2021 00:14:17 GMT

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

Re: Update Post throwing CORS Preflight error against ArcGis Online Rest Endpoint

AndyGup — Fri, 09 Jul 2021 00:18:32 GMT

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

Re: Update Post throwing CORS Preflight error against ArcGis Online Rest Endpoint

BenElan — Fri, 09 Jul 2021 01:57:21 GMT

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/