pass api-key in header to extract GeoJson

[Shingo-Ikeda]

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

[Sage_Wall]

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

[Shingo-Ikeda]

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