☑ Cross-origin error when self-hosting

Help & Support
1

Hi, I want to publish my game on my web server.

And I want to use the CDN to accelerate the loading speed.

Then, I separate some assets to the CDN. So, this is the index.html on my web server :

744×270 42.9 KB

And the dir on my web server is like this :

And the dir on CDN :

Unfortunately, I got this problem :

750×74 16.2 KB

How could I fix this problem ?

Thank you very much !

2

This error is because textures used by WebGL must either be served from the same domain (origin) as the main page or they must be served with the correct cross-origin headers.

For the server: if your assets are served from a different domain you must ensure they have the correct CORS headers.

For the game/client there are two options.

First: If you set the ASSET_PREFIX config in the index.html to a URL, then all assets will be loaded from this prefix. If the ASSET_PREFIX is an absolute URL (for example, starting with “https://”) then we enable cross-origin loading on the textures.

Second: You can manually enable cross origin texture loading with this code:

var handler = this.app.loader.getHandler("texture");
handler.crossOrigin = "anonymous";

You must run this code before any textures are requested.

1 Like
3

Hi, dave! I am very grateful for your reply.:smile:

To run the code before any textures are requested, I just need to create a script including this code in the initialize function and set this script to the first in SCRIPT LOADING ORDER ?

4

Hello, dave. I have another question. As you can see, I just modified the index.html :

In order to using the CDN, I need to separate the index.html and other files. So I must change the URLs in index.html and config.json. And every time I publish the game, I need to modify them manually.

Is there any way to change the URLs ? According to you :

Pasted image709×78 12.9 KB

Where could I set this ASSET_PREFIX ? Is it in the _ start _.js ?

Thank you !

5

Hi Wing,

If you can I would not change any URLs for assets, scenes or config data. These can all updated using the ASSET_PREFIX. The only URLs you should need to change are the script tags in the index.html.

<!doctype html>
<html>
<head>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="manifest" href="manifest.json">
    <style></style>
    <title>My Project</title>
    <script src="http://example.com/cdn/playcanvas-stable.min.js"></script>
    <script>
        ASSET_PREFIX = "http://example.com/cdn/";
        SCRIPT_PREFIX = "";
        SCENE_PATH = "123456.json";
        CONTEXT_OPTIONS = {
            'alpha': true,
            'preserveDrawingBuffer': false
        };
        SCRIPTS = [ 123, 345 ];
        CONFIG_FILENAME = "config.json";
        pc.script.legacy = false;
    </script>
</head>
<body>
    <script src="http://example.com/cdn/__start__.js"></script>
    <script src="http://example.com/cdn/__loading__.js"></script>
</body>
</html>

Set the ASSET_PREFIX in `index.html (see above example)

1 Like
6

Hi, dave ! Thank you for your reply. That’s very nice I don’t have to modify the file config.json.:grinning:

But the prefix I added in index.html is a little more than yours.

Pasted image992×471 71.1 KB

And by setting the index.html above, I only need to upload the index.html to the web server and all others files upload to cdn. :grinning: