Unity WebGL使用nginx作反向代理处理跨域，一些跨域的错误处理（添加了反向代理的配置依旧不能跨域）

于 2024-10-06 19:07:35 发布
阅读量404 收藏 10
点赞数 9
分类专栏： Unity 文章标签： nginx 运维 webgl
宝贝，copy之前先说谢谢哦~
本文链接：https://blog.csdn.net/GoodCooking/article/details/142730265
版权

反向代理与跨域描述

什么是跨域？

跨域（Cross-Origin Resource Sharing, CORS）是指在浏览器中，当一个网页的脚本试图从一个域名（协议、域名、端口）请求另一个域名的资源时，浏览器会阻止这种请求，除非目标服务器明确允许这种跨域请求。这是为了防止恶意网站通过脚本访问其他网站的资源，从而保护用户的安全。

跨域请求的三个条件

  1. 协议不同：例如，http 和 https 是不同的协议。
  2. 域名不同：例如，example.com 和 api.example.com 是不同的域名。
  3. 端口不同：例如，example.com:80 和 example.com:443 是不同的端口。

只要这三个条件中有一个不同，就会触发跨域问题。

为什么要用nginx反向代理解决跨域问题？

nginx是exe，不是前端的网页不会受到同源策略的影响，所以可以使用nginx反向代理解决跨域。
前端程序将请求发送给nginx，nginx获取到请求的URL会根据配置文件将请求的URL进行转发，收到数据后再返回给前端。

效果展示

在这里插入图片描述

代码描述

在nginx中添加配置文件

          location /api/ {
               proxy_pass http://t.weather.itboy.net;
               add_header 'Access-Control-Allow-Origin' '*';
               add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
               add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
           }

服务配置

    server {
    listen       58231;
    server_name  localhost;

nginx会处理对localhost:58231的请求，然后进行匹配，如果是localhost:58231/api/ 的请求则会将请求转发给
http://t.weather.itboy.net ，所以在前端发送的请求的地址应该是nginx的地址， const response = await fetch('http://localhost:58231/api/weather/city/101030100');

在unity的代码中是使用配置文件，需要在StreamingAssets 中创建一个txt,名称是request_url，内容是请求的URL:http://localhost:58231/api/weather/city/101030100 。 然后会发送请求到nginx，nginx根据反向代理配置将请求转发到真正的服务器。

错误处理

已经添加了proxy_pass 配置但是还是提示不能跨域或者404/502

  1. proxy_pass 后面没有斜杠：

    • 如果 proxy_pass 后面没有斜杠，Nginx 会将匹配的 location 路径附加到 proxy_pass 的 URL 后面。
    • 举个例子：
      location /api/ {
    proxy_pass http://t.weather.itboy.net;
}
      当你访问 http://localhost:58231/api/weather/city/101030100 时，Nginx 会将请求转发到 http://t.weather.itboy.net/api/weather/city/101030100。

  2. proxy_pass 后面有斜杠：

    • 如果 proxy_pass 后面有斜杠，Nginx 会将匹配的 location 路径替换为 proxy_pass 的 URL。
    • 举个例子：
      location /api/ {
    proxy_pass http://t.weather.itboy.net/;
}
      当你访问 http://localhost:58231/api/weather/city/101030100 时，Nginx 会将请求转发到 http://t.weather.itboy.net/weather/city/101030100。所以就不可访问就404了。

测试网站

一个可以使用get请求获取假数据的网站，网站本身是支持跨域的，所以不配置nginx也可以进行通信。

https://jsonplaceholder.typicode.com/

一个天气预报的API，可以进行get请求的测试

http://t.weather.itboy.net/api/weather/city/101030100

相关代码

Nginx配置

 worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       58231;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

        location /api/ {
        #  将http://t.weather.itboy.net 替换为实际的服务器
            proxy_pass http://t.weather.itboy.net;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        }

        # On-disk Brotli-precompressed data files should be served with compression enabled:
        location ~ .+\.(data|symbols\.json)\.br$ {
            gzip off;
            add_header Content-Encoding br;
            default_type application/octet-stream;
        }

        # On-disk Brotli-precompressed JavaScript code files:
        location ~ .+\.js\.br$ {
            gzip off;
            add_header Content-Encoding br;
            default_type application/javascript;
        }

        # On-disk Brotli-precompressed WebAssembly files:
        location ~ .+\.wasm\.br$ {
            gzip off;
            add_header Content-Encoding br;
            default_type application/wasm;
        }

        # On-disk gzip-precompressed data files should be served with compression enabled:
        location ~ .+\.(data|symbols\.json)\.gz$ {
            gzip off;
            add_header Content-Encoding gzip;
            default_type application/octet-stream;
        }

        # On-disk gzip-precompressed JavaScript code files:
        location ~ .+\.js\.gz$ {
            gzip off;
            add_header Content-Encoding gzip;
            default_type application/javascript;
        }

        # On-disk gzip-precompressed WebAssembly files:
        location ~ .+\.wasm\.gz$ {
            gzip off;
            add_header Content-Encoding gzip;
            default_type application/wasm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

Unity代码

using Best.HTTP;
using Cysharp.Threading.Tasks;
using System;
using UnityEngine;
using UnityEngine.Networking;

public class SendGetR : MonoBehaviour
{
    private string requestUrlFilePath = Application.streamingAssetsPath + "/request_url.txt";

    async void Start()
    {
        Debug.Log("开始发送请求啦！");
        string fileContent = await ReadFileAsync(requestUrlFilePath);
        await GetObtainCodingRulesAsync(fileContent);
    }

    /// <summary>
    /// 异步读取文件内容
    /// </summary>
    /// <param name="filePath">文件路径</param>
    /// <returns>文件内容</returns>
    public async UniTask<string> ReadFileAsync(string _filePath)
    {
        try
        {
            using (UnityWebRequest uwr = UnityWebRequest.Get(_filePath))
            {
                await uwr.SendWebRequest();
                Debug.Log("请求到的URL是：" + uwr.downloadHandler.text);
                return uwr.downloadHandler.text;
            }
        }
        catch (System.Exception e)
        {
            Debug.LogError("读取文件失败: " + e.Message);
            return null;
        }
    }

    /// <summary>
    /// 异步获取赋码规则
    /// </summary>
    /// <param name="url">请求的URL</param>
    /// <returns>赋码规则列表</returns>
    public async UniTask<string> GetObtainCodingRulesAsync(string _url)
    {
        try
        {
            var request = new HTTPRequest(new System.Uri(_url), HTTPMethods.Get, (req, res) =>
            {
                if (res.IsSuccess)
                {
                    Debug.Log("返回的数据是：" + res.DataAsText);
                }
                else
                {
                    Debug.Log("发送失败tmp_requestURL: " + _url);
                }
            });
            await request.Send();
            await UniTask.WaitUntil(() => request.Response.DataAsText != null);
            return request.Response.DataAsText;
        }
        catch (Exception e)
        {
            Debug.LogError($"发送失败: {e.Message}");
        }

        return "没有获取到数据";
    }
}

测试使用html代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发送GET请求</title>
</head>

<body>
  <h1>发送GET请求到CSDN</h1>
  <p>请点击按钮发送请求，并在浏览器控制台查看结果。</p>

  <!-- 添加一个按钮 -->
  <button id="sendRequestButton">发送请求</button>

  <script>
    // 发送GET请求的函数
    async function sendGetRequest() {
      try {
        // 发送GET请求到你的Nginx服务器
        const response = await fetch('http://localhost:58231/api/weather/city/101030100');

        // 检查响应状态
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        // 读取响应内容
        const data = await response.text();

        // 在控制台中显示响应内容
        console.log('Response status:', response.status);
        console.log('Response data:', data);
      } catch (error) {
        // 捕获并显示错误
        console.error('Error:', error);
      }
    }

    // 获取按钮元素
    const button = document.getElementById('sendRequestButton');

    // 为按钮添加点击事件监听器
    button.addEventListener('click', sendGetRequest);
  </script>
</body>

</html>

Enjoy Life

先生沉默先
关注
专栏目录
unity webgl mysql_unity 发布web GL读取MySQL数据库，跨域问题已解决——小白版
weixin_33982972的博客
01-19 1305
更新问题发现如果unity发布后的webGL，在网页端读取服务器的数据，会出现报错Access to XMLHttpRequest at '服务器数据地址t' from origin '本机地址' has been blocked by CORS policy:No 'Access-Control-Allow-Origin' header is present on the requested r...
Nginx部署使用gzip压缩的Unity网页WebGL
07-01
总结来说，"Nginx部署使用gzip压缩的Unity网页WebGL"涉及到的步骤包括Nginx服务器的配置、gzip压缩的启用、Unity的WebGL导出、反向代理的设置以及安全性和性能优化。理解并熟练掌握这些知识点对于高效地发布和运行...
Unity webgl跨域问题 unity使用nginx设置跨域 ，修改请求头
GoodCooking的博客
09-17 690
Unity webgl跨域问题 unity使用nginx设置跨域 ，修改请求头
unity phpstudy 打包webgl 跨域问题 UnityWebRequest CORS No ‘Access-Control-Allow-Origin‘ header is present
炼丹炉里有煤灰
08-06 4118
问题描述 unity项目打包成webgl，在使用外部资源或使用UnityWebRequest获取数据时，浏览器提示错误： Access to XMLHttpRequest at has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 解决思路 只是普通的前端跨域问题。有点后端经验就能解决，只需要做跨域设置。但如果本地测试环境是phpstudy
用nginx解决前端部署跨域问题
biaobiaogege的博客
04-02 5095
用nginx解决前端部署跨域问题配置
vue项目结合unity webgl通信（亲身实践 Unity2022.3版本）
蓝紫色的忧郁的博客
07-14 7832
在参考网上众多资料后，终于将Vue与Unity Webgl双向通信的功能完成。在此过程中遇到了很多问题，故记录下整体流程。1.unity端实现一个jslib文件预定义函数作为桥接。2.c#使用DllImport引入和调用预定义的函数。3.web端使用js定义被调用函数。1.Unity Webgl程序嵌入vue1.Unity -> vue通信2.vue -> Unity通信。
webgl跨域问题
程序人生
07-09 1180
跨域问题原因是前端代码放在A服务器上，其中的脚本需要访问B服务器的接口，此时在浏览器上因为安全问题限制访问因此需要在B服务器的配置白名单中加上A。服务器需要向发出的 http 响应中添加一些 Access-Control 标头，以指示哪些网页有权从 Web 浏览器读取该信息如果只是调试用，可以在A服务器上配置代理到B服务器，如nginx配置如下：proxy_pass B服务器地址;然后将代码中访问B服务接口的地址都改成A服务代理地址，这样浏览器认为只访问A一个域名，就不会引起跨域问题了。
UnityWebGL发送Http请求获取资源跨域问题
qq_42242744的博客
04-16 967
1.服务器使用的nginx部署，需要在nginx文件中的server块添加 "add_header 'Access-Control-Allow-Origin' '*' always;UnityWebGL端在使用HTTP协议请求公网资源时会出现跨域问题，需要在客户端及服务器做相应配置。2.在发布的UnityWebGL根目录下添加配置文件 命名为web.config即可。部署在公网上的全景视频资源，就通过UnityWeb端获取到了。
Unity（WebGL）跨域请求处理（避坑专用）
Bruinxyz的博客
05-10 1591
Unity发布WebGL跨域请求解决方案，亲测有效
Untiy部署至WebGL平台之nginx服务部署
Peter的博客
09-08 3869
运行输入cmd命令，打开命令行 切换到nginx.exe所在的目录，命令：cd /dD:\nginx-1.15.8，注意要加 /d nginx 启动：start nginx nginx 停止：nginx -s stop nginx 退出：nginx -s quit <1> 安装：下载Nginx文件，并解压。 <2>启动：直接双击nginx.exe文件，启动nginx，并检查是否启动成功，检查的方式是直接点击默认网址 看到...
Unity WebGL本地运行测试的 web配置文件 webconfig
06-28
正常打包WebGL后在浏览器直接运行会报以下这个错： It seems your browser does not support running Unity WebGL content ...我们通过部署IIS服务把本机当做服务器，配置到打包后的路径就能正常在本地浏览器打开运行
Unity WebGL网页端输入法支持中文全屏输入
07-17
在早期的Unity WebGL实现中，中文输入在全屏模式下可能会遇到问题，导致输入不顺畅或者无法正确显示中文字符。 标题提到的"Unity WebGL网页端输入法支持中文全屏输入"，意味着Unity已经解决了这个问题，现在用户...
使用 Docker 构建 LLaMA-Factory 环境
GDHBFTGGG的博客
10-01 1155
使用 Docker 构建 LLaMA-Factory 环境可以简化依赖安装和环境配置。
（笔记）第三期书生·浦语大模型实战营（十一卷王场）--书生入门岛通关第2关Python 基础知识
haidizym的博客
10-02 479
学员闯关手册：https://aicarrier.feishu.cn/wiki/ZcgkwqteZi9s4ZkYr0Gcayg1n1g?课程视频：https://www.bilibili.com/video/BV1mS421X7h4/课程文档：https://github.com/InternLM/Tutorial/tree/camp3/docs/L0/Python。
MySQL - 运维篇
ltt159264的博客
09-29 316
记录了所有的增删改查语句以及DDL语句
运维自动化shell脚本总结
最新发布
大黄鸭在发光的专栏
10-03 399
Shell脚本是一系列命令的集合，通常用于自动化执行任务。
Docker
m0_73939789的博客
10-01 1327
Docker本身包含一个后台服务，我们可以利用Docker命令告诉Docker服务，帮助我们快速部署指定的应用。Docker服务部署应用时，首先要去搜索并下载应用对应的镜像，然后根据镜像创建并允许容器，应用就部署完成了。
IT基础监控范围和对象
MXsoft618的博客
09-29 609
综上所述，监控易的监控范围非常广泛，几乎涵盖了所有主流的IT基础设施以及相关的设备和系统。通过全面、实时、准确的监控功能，监控易为运维团队提供了强大的支持，帮助他们及时发现并解决潜在的问题，确保业务系统的稳定运行和高效运维。除了上述监控范围外，监控易还支持其他扩展监控功能，如被动式设备监控、自定义脚本监控、高级监测点监控等。监控易作为一款由美信时代独立自主研发的分布式一体化集中监控平台，其监控范围极为广泛，几乎涵盖了所有主流的IT基础设施以及相关的设备和系统。
Unity使用NGINX配合jar包进行跨域
09-14
在Unity游戏引擎中，为了支持Web请求（例如通过WWW类）与外部服务器进行数据交互，特别是在处理跨域资源共享（Cross-Origin Resource Sharing, CORS）时，可以利用Nginx作为反向代理服务器，同时结合jar包来处理跨域问题。 步骤如下： 1. **设置Nginx**: - Nginx需要配置允许特定域名访问的游戏服务器资源。在Nginx的配置文件（通常是`nginx.conf`）中，创建一个新的location块，允许来自指定源（如`http://game-api.example.com`）的请求。 ```nginx location /game-data { add_header 'Access-Control-Allow-Origin' '*'; // 允许所有来源跨域 add_header 'Access-Control-Allow-Methods' 'GET, POST'; add_header 'Access-Control-Allow-Headers' 'Content-Type'; proxy_pass http://your-game-server:8080; // 代理到Unity服务器端口 } ``` 2. **打包jar包**: - 如果你的Unity项目使用了Java后端服务，可以将CORS相关的库（比如`java.net.http`或第三方库如`spring-cors`）打包成jar文件，并部署在服务器上。 - 创建一个Java servlet或者RESTful API，在响应头中添加CORS策略，与Nginx配置相匹配。 3. **Unity客户端**: - 使用Unity的WWW类发送网络请求时，先构建一个指向Nginx地址的URL，而不是直接目标服务器地址。 ```csharp WWW www = new WWW("http://your-nginx-proxy.com/game-data/api/endpoint"); ``` 这样，Unity客户端就可以安全地通过Nginx进行跨域请求，而Nginx作为中间层，负责转发请求并管理跨域策略。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值