Select to view content in your preferred language

pass api-key in header to extract GeoJson

423
2
09-18-2023 07:38 AM
Shingo-Ikeda
Occasional Contributor

I am trying to pass api-key in header using esriConfig.request.interceptors as well as esriConfig.request.trustedServers in TypeScript using JSAPI 4.x, however, it doesn't return the geojson results as I am able to extract through postman.  Any crue what is causing CORS error through this request method? 

 

    esriConfig.request.trustedServers.push(this.base_url);
    esriConfig.request.interceptors.push({
      urls: geojson_url,
      before: function (params: any) {
        params.requestOptions.headers = {
          'x-api-key': this.x_api_key,
          'Access-Control-Allow-Origin': this.base_url,
        };
      },    
      after: function(response) {
        if (!response.ssl) {
          response.ssl = true;
        }
        const geojsonLayer = new GeoJSONLayer({
          title: 'Forecast Kind',
          url: response.data, 
          popupTemplate: template_forecast_kind,
          visible: false,
          outFields:["*"] 
        });
      },
      headers: {
        'x-api-key': this.x_api_key,
        'Access-Control-Allow-Origin': '*',
      },
    });

 

The error shows:

Access to fetch at 'https://.....com/sites/current_forecast_status' from origin 'http://localhost:4200' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Thanks,

Shingo

 

Shingo Ikeda
Geospatial Data Scientist/Developer - Geographical Information Platform
Global Power Generation - Digital Satellite USA and Canada
0 Kudos
2 Replies
Sage_Wall
Esri Contributor

Hi @Shingo-Ikeda , thanks for asking your question here.  Access-Control-Allow-Origin is a response header and won't be honored if sent as part of the request.  It needs to be set as a response header on the web server (not the application code) allowing the origin of you application. This webpage has instructions on how to set CORS up on multiple different web servers, however, you may want to check to official docs for whatever server you happen to be using.

https://www.w3.org/wiki/CORS_Enabled

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

0 Kudos
Shingo-Ikeda
Occasional Contributor

Hi @Sage_Wall,

Thank you for your reply. I am using python flask server to return GeoJson response as follows:

        if format == 'json':
            response = Response(df_forecast_site_status.to_json(), mimetype='application/json')
        else:
            response = Response(df_forecast_site_status.to_csv())
        response.headers.add('Access-Control-Allow-Origin', '*')
        return response

It works if environment is in dev or staging environment where x-api-key is not required. Soon as I add custom header, it fails with CORS error.

Shingo

 

Shingo Ikeda
Geospatial Data Scientist/Developer - Geographical Information Platform
Global Power Generation - Digital Satellite USA and Canada
0 Kudos