Use Fonts locally or from portal (CORS error)
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.
1)
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.
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";
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?
