nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Use Fonts locally or from portal (CORS error)

SebastianKrings

When using labels on features fonts are needed and loaded from arcgis.com.

In closed environments without internet access this leads to an erorr while performing the get request and the features are shown without their labels.

To fix that there are two possible ways as fas as I know.

Either download them and put them somewhere and somewhow in the static folder.
Or link the fontsUrl to the portal.

I fail with both and hope to get help.

How do I download the fonts and place them locally into the JS App statics folder such that no fonts need to be loaded somewhere else?
I guess I then need to link the esriConfig.fontsUrl to this local path. How exactly does this local path then look like?

1b)
Is there any way to omit the esriConfig.fontsUrl by only using the esriConfig.assetsPath?

2)
When linking the esriConfig.fontsPath to the portal I am receiving CORS errors.
In first instance I am developing on localhost.

I guess I need to change some settings in the portal.
I also found this setting:

But as one can see its empty. From the description saying to "limit" means for me having no entries at all means "unlimited".

Can this cause the * in the response header claimed by the error above?
When I try to put in my domain "localhost" "localhost:4200" "http://localhost:4200" "http://localhost" that does not work, because I then am getting a general CORS error to be blocked.

Also putting our Webserver where the app is deployed (my.server.local) does not even allow this app. It also stays blocked by these settings.

Seems I missunderstood this setting.

Any help would be appreciated.

Encontre mais publicações marcadas com

Accepted answers

SebastianKrings

I finally found a solution by using an interceptor which disables credential authentification since fonts do not require credentials. Without using credentions the cors errors do not occur any more.

function registerPortalFontsInterceptor(logService: LogService): void {
    const portalFontsUrl = new URL('apps/fonts', `${esriConfig.portalUrl}/`).toString();

    esriConfig.fontsUrl = portalFontsUrl;

    const portalFontsInterceptor: RequestInterceptor = {
        urls: portalFontsUrl,
        before: (params) => {
            // Portal font files are static resources and should be requested without credentials.
            params.requestOptions.withCredentials = false;
            params.requestOptions.useProxy = false;
        },
        error: (error) => {
            logService.warn('Portal font request failed', { error });
        }
    };

    esriConfig.request.interceptors?.push(portalFontsInterceptor);
}

For everyone checking on that, it may be helpful to know, there are at least three URLs the fonts can be asked from:
1) From ArcGIS when there is not fontsUrl defined at all:

2) From a local path ('assets' here) delivered with the app itself:

3) From Portal using the interceptor above:

All comments

JoelBennett

We too have had a need to host the font files locally. The images below show our folder structure, where the "Website" folder is the root directory of our website, and then you see further subdirectories "jsapi" and "fonts". It is this "fonts" folder in which we've organized the font files in the same manner as seen on Esri's site.

In the code, we just add the following, and it works:

esriConfig.fontsUrl = "/jsapi/fonts";

If your application is on a different server than the fonts, you'd have to use an absolute URL, e.g.:

esriConfig.fontsUrl = "https://myServer/jsapi/fonts";

SebastianKrings

Thanks, thats great.
Do you know whether esriConfig.fontsUrl is mandatory or whether it is also possible to place it under esriConfig.assetsPath instead?

SebastianKrings

We did some further efforts without much luck but may found a bug on how portal works regarding fonts.
So for short use we are using the fonts directly locally in the app which is a workaround. But reading from portal would be the preferred way as fat as I understand the documentation.

1)
Documentation is a good point. I found two places with kinda misleading information:
a) this one shows urls with `//myserver/fonts` but no sample for using the portal fonts
https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html#fontsUrl
b) while this one shows urls with `//portal/apps/fonts` which is the correct path
https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html

2)
I test the app local dev using VS Code which opens the app on localhost:4200 + a deployment on an IIS.
For test I excluded *arcgis.com from proxy such that it is not accessible.
This intended leads to the following http error:

GET https://static.arcgis.com/fonts/arial-regular/0-255.pbf net::ERR_NAME_NOT_RESOLVED

My attempts to load fonts are
a - locally delivered by app
b - provided as own folter on IIS
c - read from portal

esriConfig.fontsUrl = esriConfig.portalUrl + '/apps/fonts';

2a) local delivery
As info provided by @JoelBennett it works good and is the short workaround now.
I set

esriConfig.fontsUrl = './assets/fonts'

where assets is a direct subfolder of the ts-file (serc/app/app.config.ts) I am setting this.

This for I copied fonts from portal folder from the machine where we installed the portal under:
C:\Program Files\ArcGIS\Portal\apps\fonts

Done and working.

2b) Host dedicated folder on IIS
- create new folder under IIS:
C:\inetpub\wwwroot\esri_fonts
- Again copy fonts into this new folder from portal folder:
C:\Program Files\ArcGIS\Portal\apps\fonts

- On IIS Manager add CORS Header to HTTP-Response-Headers:

Access-Control-Allow-Credentials = true
Access-Control-Allow-Origin = http://localhost:4200

- This time setting the fontsUrl to:

esriConfig.fontsUrl = 'https://my.machine.local/esri_fonts'

Done and working.

2c) Read from Portal
- At first setting the fontsUrl to:

esriConfig.fontsUrl = esriConfig.portalUrl + '/apps/fonts';

- Now I get the following http errors:

Access to fetch at 'https://my.machine.local/portal/apps/fonts/arial-unicode-ms-regular/0-255.pbf' from origin 'http://localhost:4200' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

As already mentioned I assume this is about the portal settings where no allowed origin is set yet and therefore * is given as header value.
On Portal/Settings/Security/Allow Origin I tried the following entries:

http://localhost
http://localhost/
http://localhost:4200
http://localhost:4200/

I still get the same CORS errors as before.

I found this file:
C:\Program Files\ArcGIS\Portal\framework\webapps\rootapp\WEB-INF\urlrewrite.xml
Which contains this:

  <rule>
    <from>.*</from>
    <set type="response-header" name="Vary">Origin</set>
    <set type="response-header" name="Access-Control-Allow-Origin">*</set>
  </rule>

When commenting out and restarting the server in appears again, seems the portal repairs itself.
I am wondering why * is given here since * is not allowed any more at all as far as I know.
I am not sure whether this is the cause of my problem.
May this is a bug in the portal where pointing to the fonts folder is not supported/tested any more?

JoelBennett

Yes, you'll need to set esriConfig.fontsUrl no matter what. However, I suppose that if you organize your fonts under the same location as referred to by assetsPath, then you'd set fontsUrl and assetsPath to the same value.

SebastianKrings

I finally found a solution by using an interceptor which disables credential authentification since fonts do not require credentials. Without using credentions the cors errors do not occur any more.

function registerPortalFontsInterceptor(logService: LogService): void {
    const portalFontsUrl = new URL('apps/fonts', `${esriConfig.portalUrl}/`).toString();

    esriConfig.fontsUrl = portalFontsUrl;

    const portalFontsInterceptor: RequestInterceptor = {
        urls: portalFontsUrl,
        before: (params) => {
            // Portal font files are static resources and should be requested without credentials.
            params.requestOptions.withCredentials = false;
            params.requestOptions.useProxy = false;
        },
        error: (error) => {
            logService.warn('Portal font request failed', { error });
        }
    };

    esriConfig.request.interceptors?.push(portalFontsInterceptor);
}

For everyone checking on that, it may be helpful to know, there are at least three URLs the fonts can be asked from:
1) From ArcGIS when there is not fontsUrl defined at all:

2) From a local path ('assets' here) delivered with the app itself:

3) From Portal using the interceptor above:

SebastianKrings

For any reason the app keeps trying to load tahoma-regular font which does not exist on server.

We cannot find any single point where we would use this font. We checked all symbology, templates, webmap.

This seems to come from maps api itself.

Everything works except these ugly error message in the console once (happily at most once) the user scrolls in the map.

Solution would be to add that font to server but better would be that the server already knows this font and is rolled out.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.