We have developed app for collecting and storing ANPR meta-data coming from Axis cameras called Data Factory. Our web application in Data Factory provides tools to work with recognition events from edge apps.
Also, we have a possibility to show short video clip for the investigation purpose, using Milestone Mobile Server API and the examples from the documentation.
We have had to add the following line into Mobile Server configuration to allow CORS and display video in user’s browser.
<add key "Access-Control-Allow-Origin” value=“*” />
Also, we provide a Milestone Client plugin to allow user working with data right in the Milestone interface.
Our plugin is actually Chromium-based browser.
The issue is that we still receive CORS error when trying to access video from plugin, while everything works fine in other browser on the same PC.
Could you assist us how we can troubleshoot the issue or maybe there are common practices for the CORS configuration in Mobile Server?
Many thanks
Hi Jan,
Just to wrap up,
This problem is reproducible only on one specific browser, but not on others on one and the same PC ?
If that’s the case the issue is very strange, but is not uncommon in the web world 
Shooting in the dark you could try to uncomment and/or change some of the lines in the config file :
<!--add key ="Access-Control-Allow-Methods" value ="POST, GET, OPTIONS"/>
<add key ="Access-Control-Allow-Headers" value ="Access-Control-Allow-Origin, Content-Type"/-->
We’ve seen in the past browsers to need one of them or both.
Btw does this mean that AJAX request are working, but only WebSocket creation fails ?
We receive video in Chrome, Edge, Safari, but we fail to see it inside our Chromium-based plugin on the same PC. And the log shows CORS error despite it is allowed.
Jan,
Have you expanded my previous post ?
And did you try with settings mentioned there ?
yes, of course. We are now testing a new release version. Once this is checked, we will try with it and let you know. Many thanks.
Can you post us the log error please.
Hello Petar, Teodor,
Here is the console output when we are running from chromium browser inside Milestone Client plugin
Request @ Ajax.js:64
initializeAjaxRequest @ ConnectionRequest.js:75
(anonymous) @ ConnectionRequest.js:176
setTimeout (async)
restartHighPriorityCommand @ ConnectionRequest.js:172
onComplete @ ConnectionRequest.js:106
checkReadyState @ Ajax.js:32
XMLHttpRequest.send (async)
Request @ Ajax.js:64
initializeAjaxRequest @ ConnectionRequest.js:75
(anonymous) @ ConnectionRequest.js:176
setTimeout (async)
restartHighPriorityCommand @ ConnectionRequest.js:172
onComplete @ ConnectionRequest.js:106
checkReadyState @ Ajax.js:32
XMLHttpRequest.send (async)
Request @ Ajax.js:64
initializeAjaxRequest @ ConnectionRequest.js:75
(anonymous) @ ConnectionRequest.js:176
:5000/#/events:1 Access to XMLHttpRequest at ‘http://10.0.5.152:8081/XProtectMobile/Communication’ from origin ‘http://10.0.5.152:5000’ has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
ConnectionRequest.js:160 Command RequestStream failed
However, the same works in browser.
Jan,
My best guess will be that OPTION request passes (so called preflight) and something in the server response doesn’t like to the browser.
This is behavior that is browser dependent.
Most probably is something connected with "Access-Control-Request-Headers
" as described here.
Therefore I asked you to play with those settings in the server.
Could you make a WireShark trace in order to be seen the OPTIONS request/response.
Hi Jan,
from what I see as a log and your explanation of the environment my best guess is that the plugin is build with CORS restrictions are endorsed into the chromium browser to have implicit allow statement from the server:
https://www.chromium.org/Home/chromium-security/extension-content-script-fetches
Can you try to return the original state of Access-Control-Allow-Origin and add your mobile server URL at the connect-src part of the CORS. Something like:
<add key=“Content-Security-Policy” value=“default-src ‘self’; script-src ‘self’ https://www.gstatic.com http://www.googletagmanager.com/gtag/js; connect-src ‘self’ ws://*:* wss://*:* https://www.google-analytics.com/ https://firebaseinstallations.googleapis.com/ http://10.0.5.152:* img-src ‘self’ data: blob:; style-src ‘self’ ‘unsafe-inline’; frame-ancestors ‘self’; media-src data: blob: ‘self’ mediastream:;” />
Let me know if there is any progress.
Best regards
Teodor
Hello Teodor,
I have tried various combinations of setting here, including your suggestions.
Still if I have default
I receive an error:
Access to XMLHttpRequest at ‘http://10.0.5.152:8081/XProtectMobile/Communication’ from origin ‘http://10.0.5.152:5000’ 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 I switch it to
I get video in regular browser, but have this in built-in
Access to XMLHttpRequest at ‘http://10.0.5.152:8081/XProtectMobile/Communication’ from origin ‘http://10.0.5.152:5000’ has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
We will check the Chromium re-compile options