CORS Error - Generate Token

[AndrewMurdoch1]

Good Day

A function which retrieves the token for a client, and uses it to authenticate to the hosted feature layer, started failing out of the blue, throwing CORS errors from Angular.

The specific error we're getting is:

Access to fetch at 'https://<client>.geopedia.ca/portal/sharing/rest/generateToken' from origin 'http://localhost:4200' has been blocked by CORS policy: 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.

When we try to access the resource using Insomnia or Postman, we can get a token, and the code we used to fetch the token was working fine a couple of weeks ago, this is the function:

const tokenParams = {
    username:  'blah',
    password:  'blah',
    ip:  '',
    referer:  '',
    client:  'requestip',
    expiration:  '60',
    f:  'pjson'
}

// -ignore
request(this._tokenURL, {params: tokenParams}).then((esriResponse) => {
    request(this.testURL, {params: {token: esriResponse.token}}).then((response) => {
        this._featureLayer = _.cloneDeep(response);
        r(this._featureLayer.fields);
    }).catch((error) => {
        console.log('Error');
        console.log(error);
        j(error);
    });
}).catch((error) => {
   console.log('Error');
   console.log(error);
   this.alert.genericError();
   j(error);
});

I generated the tokenParams object using: https://<client>.geopedia.ca/portal/sharing/rest/generateToken  which will also return a token.  I haven't changed anything in this code in weeks, so I have to assume it's either something on the clients side or ESRI's. 

Has anyone run into similar issues?

Thanks

[AndyGup]

I took a quick look and it looks like geopedia.ca is a self-hosted Portal? If so, it's possible something changed on their server-side CORS configuration. Otherwise, you'll need to do some testing to figure out which header within the app is triggering the error, or maybe you are missing a header.

[AndrewMurdoch1]

Good Day

We can have them look, it's self-hosted, and they've been troubleshooting a problem with ESRI, so they may have changed the settings to something invalid.  It's odd the request works from Post Man / Insomnia, but not from Angular. 

My co-worker also ran the token query from C# and was able to retrieve the token.  We'll reach out to the client in question.

Thanks

[AndyGup · Accepted solution]

Postman gives precise control over headers, in comparison you may not be aware of all the headers that are being generated by the JavaScript-based request() method. That's why we recommend comparing headers between requests that are successful and requests that aren't. 

[AndrewMurdoch1]

Good Day

The problem is on the client's server, but they don't know how to resolve it.  We've bypassed the issue for now, by using a token and passing it to the request API.

Thanks for your help 🙂