我使用 Facebook 网络托管来存储我的 Canvas 游戏资源,当它们尝试加载时,我不断收到 404 错误。
我的index.html 文件加载正确。我的资源都是相对于我的 index.html 文件加载的,该文件位于根目录中。
我上传的 zip 文件的结构如下:
以下是当我尝试在 facebook 中加载 Canvas 页面时在控制台中收到的错误;所有 404:
这是index.html 文件...
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<meta charset="utf-8" />
<title>Title Here</title>
<link rel="stylesheet" type="text/css" href="/styles/main.css">
<link rel="stylesheet" href="lib/flexboxgrid.min.css">
</head>
<body>
<div id="canvasContainer"></div>
<script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js"></script>
<script src="lib/pixi.min.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="bundle.js"></script>
</body>
</html>
似乎资源根本没有上传。
在查看开发工具网络选项卡后,我还注意到我的index.html是从https://apps-<acc_key>.apps.fbsbx.com/bundle/<randomnumbers>/<more random numbers>/index.html?signed_request=.....
加载的。位置。
但是,我的其他资源没有 'bundle/<randomnumbers>/<more random numbers>/'
除了他们的地址位置之外。我尝试直接在浏览器中加载资源,但收到 403 Denied 错误。我什至尝试附加signed_reqeust token ,但也没有成功;同样的 403 错误。
最佳答案
大部分问题来自<base href="/" />
tag 。
虚拟主机 Documentation
<小时/>It's very important that the generated index.html file is located at the root of the zip file, as this is the only place we can launch the content. All other URLs need to be a relative path.
正确相对网址
<link href="styles.css" rel="stylesheet"/>
or
<link href="./styles.css" rel="stylesheet"/>
结果网址将采用以下格式:
https://apps-<app id>.apps.fbsbx.com/bundle/<another id>/<another id>/styles.css
<小时/>
不正确绝对网址
<link href="/styles.css" rel="stylesheet"/>
https://apps-<app id>.apps.fbsbx.com/styles.css
<小时/>
当你使用<base href="/" />
时HTML 元素指定用于文档中包含的所有相对 URL 的基本 URL。所以基本上你使用绝对路径,当你应该依赖 facebook 网络托管来解析路径时
所以改变/styles/main.css
至styles/main.css
并删除 <base href="/" />
关于javascript - 使用 facebook 网络托管作为 Canvas 页面时,为什么我的资源没有被加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44148974/