Web apps and CORS
A web app served from its own origin, such as https://player.example.com, calls the Media Server cross-origin, and the browser only lets it read the responses when the server allows that origin with CORS. Native apps, command-line tools, and server-side code do not send an Origin and are not affected by anything on this page.
Origins allowed by default
| Origin | Example |
|---|---|
localhost and 127.0.0.1 over HTTP, on any port | http://localhost:5173 |
| The server's own Remote Access hostnames, on any port | https://abc123.connect.cardinalapps.host:24900 |
| Cardinal's hosted web apps | https://music.cardinalapps.cloud |
Requests with no Origin header | Native apps, curl |
A web app in development on localhost therefore works against any Media Server without configuration. Once it is served from a real domain, the server's owner has to allow that origin.
Adding an origin
The owner or an administrator adds custom origins in either of two ways.
In the Admin app: go to Cloud Services, select Configure on the Remote Access card, and add the origin under Custom CORS origins. This list can only be edited while Remote Access is turned on.
Through the API, which works whether or not Remote Access is on:
curl -X POST http://192.168.1.40:24900/api/v1/cors-origins \
-H "Authorization: Bearer <token>" \
-H "Content-Type: application/json" \
-d '{"origin": "https://player.example.com"}'
Only the scheme, host, and port are kept, so https://player.example.com/app is stored as https://player.example.com. GET /api/v1/cors-origins lists the custom origins, and DELETE /api/v1/cors-origins/{id} removes one. All three require the ServerSettings capabilities that the owner and administrators hold.
HTTPS pages and HTTP servers
Browsers block an HTTPS page from calling an HTTP address. A web app served over HTTPS cannot reach http://192.168.1.40:24900, even on the same network. Give it an HTTPS address for the server instead:
- A Remote Access address, found as described in Connecting to a server.
- The owner's custom domain, if they run one.
Finding the server from a browser
The Remote Access negotiation API does not allow third-party origins, so a web app on its own domain cannot look up a server's addresses from the browser. Ask the user for the server's address, or look it up from your own backend. See Calling the negotiation API from a browser.
Tokens in the browser
A web app on another site cannot use the refresh cookie that keeps the bundled apps signed in. Have the user create a personal access token and enter it into the app, and keep it in the browser's storage. Never build a token into a web app's code: anyone who loads the app can read it.
Was this article helpful?