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

先生沉默先2024-10-07 9:30

反向代理与跨域描述

什么是跨域？

跨域（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中添加配置文件

js 复制代码 
          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';
           }

服务配置

js 复制代码 
    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 后面。

    • 举个例子：

      nginx 复制代码 
      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。

    • 举个例子：

      nginx 复制代码 
      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也可以进行通信。

js 复制代码 
https://jsonplaceholder.typicode.com/

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

js 复制代码 
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

相关推荐
极小狐4 分钟前
极狐GitLab 的合并请求部件能干什么？
运维·git·安全·gitlab·极狐gitlab
H13469489016 分钟前
服务器异地备份，服务器异地备份有哪些方法？
运维·服务器
ImAlex18 分钟前
运维大师教你使用流量监控神器nethogs分析Linux进程网络流量
linux·运维
ImAlex22 分钟前
运维大神教你如何用iftop和ss命令结合排查带宽占用高的进程
linux·运维
Lonwayne43 分钟前
Web服务器技术选型指南：主流方案、核心对比与策略选择
运维·服务器·前端·程序那些事
法迪1 小时前
Linux电源管理(2)_常规的电源管理的基本概念和软件架构
linux·运维·服务器·功耗
古德赖可可1 小时前
chrony服务器（2）
linux·运维·服务器
码码哈哈0.01 小时前
同样开源的自动化工作流工具n8n和Dify对比
运维·开源·自动化
running thunderbolt2 小时前
Linux:基础IO && 文件系统
linux·运维·性能优化
GOATLong2 小时前
网络基础概念
linux·运维·服务器·网络·arm开发·c++
热门推荐
01西电B测-计算机网络综合实验(含验收问题)02KGG转MP3工具|非KGM文件|解密音频03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU05yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记06我决定放弃搞 Java 了07Coze扣子平台完整体验和实践（附国内和国际版对比）08YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】09DeepSeek各版本说明与优缺点分析10yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）