Unity打包WebGl部署IIS解决方案

置顶有点朦

已于 2022-06-24 17:27:25 修改

阅读量4.7k

点赞数 2

分类专栏：多媒体互动软件文章标签： unity 游戏引擎 c#

于 2022-02-08 15:53:16 首次发布

本文链接：https://blog.csdn.net/qq_41088607/article/details/122823623

版权

多媒体互动软件专栏收录该内容

12 篇文章 64 订阅 ¥99.90 ¥299.90

订阅专栏

本文详细介绍了如何使用Unity打包WebGL并部署到IIS服务器，包括解决Unity 2020之后版本可能出现的黑屏及报错问题，设置IIS新建网站，创建web.config配置文件以允许跨域访问。通过理解同源策略并配置HTTP响应标头，成功解决WebGL加载服务器资源的跨域限制。

摘要由CSDN通过智能技术生成

记录下Unity打包WEBGL 发布与部署方案：
1：制作好的Unity工程选择webgl打包平台（Unity2020以后的版本发布Webgl出现黑屏的情况或者莫名其妙的报错，需要勾选PlayerSetting-PublishingSetting-DecompressionFallback）
在这里插入图片描述
2：安装IIS，没有安装可参考：
安装好的直接启动IIS工具
打开界面如下：

3：右击网站新建一个网站，只需要填写以下两点即可；指定路劲是你打包出来的webgl文件夹下，也就是里面有一个index.html文件的文件夹路劲；
在这里插入图片描述
4：在填写的路劲文件夹下新建一个web.config的文件，写入以下内容：

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | VideoPro</title>
  </head>
  <body style="text-align: center">
    <canvas id="unity-canvas" width=1900 height=900 style="width: 1900px; height: 900px; background: #231F20"></canvas>
    <script src="Build/www.loader.js"></script>
    <script>
      createUnityInstance(document.querySelector("#unity-canvas"), {
        dataUrl: "Build/www.data.unityweb",
        frameworkUrl: "Build/www.framework.js.unityweb",
        codeUrl: "Build/www.wasm.unityweb",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "DefaultCompany",
        productName: "VideoPro",
        productVersion: "0.1",
        // matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
        // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
      });
    </script>
  </body>
</html>

然后重新启动网站即可通过IP+端口访问该网站；
5：解决webgl打包后无法加载服务器资源问题（编辑器下正常加载），感谢前同事的支持，了解到一个新词 “IIS跨域”；
什么是跨域
只有当协议、端口、和域名都相同的页面，则两个页面具有相同的源。只要网站的协议名protocol、主机host、端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用，会受到同源策略的限制。
解决办法：
点击IIS管理器部署的网站找到<HTTP响应标头> -右击空白处，添加以下内容：

 // 名称                             值
 // Access-Control-Allow-Origin      *
 // Access-Control-Allow-Methods     GET, POST, PUT, DELETE, OPTIONS
 // Access-Control-Allow-Headers     Content-Type

在这里插入图片描述