Unity WebGL嵌入React应用后发起HTTP请求出现CORS错误问题咨询

数据老陈

2026-9-26

问题原因

你误认为两个场景来源一致，实际Origin完全不同：独立运行Unity WebGL时的源是http://127.0.0.1:8887，嵌入React项目后，请求是在React应用的页面上下文发起的，Origin是React本地服务的地址（通常create-react-app默认是http://localhost:3000）。即便端口一致，127.0.0.1和localhost也会被浏览器识别为不同源，目标S3存储桶如果没有配置允许当前React服务的源，就会触发CORS错误。
BestHTTP插件在嵌入React上下文时，默认可能会给请求附加额外的自定义头，触发CORS预检请求，而独立运行时未触发预检，S3的CORS规则没有配置允许对应的请求头或者预检请求。
你之前用于运行Unity WebGL的8887端口本地服务器可能默认配置了跨域代理或响应头，而React的开发服务器没有对应配置。

解决方案

调整S3存储桶的CORS配置，把React本地服务的源（比如http://localhost:3000）加入允许的Origin列表，同时允许GET请求、允许用到的请求头，如果有预检需求还要配置MaxAge减少重复预检。
开发阶段可以使用React开发代理配置绕过CORS校验：
1. 先执行npm install http-proxy-middleware --save安装依赖
2. 在React项目根目录下新建setupProxy.js，加入如下配置：
```
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/s3-proxy',
    createProxyMiddleware({
      target: 'https://nftimages.s3.us-east-2.amazonaws.com',
      changeOrigin: true,
      pathRewrite: {
        '^/s3-proxy': '',
      },
    })
  );
};
```
1. 将Unity中请求的S3地址前缀替换为/s3-proxy，比如原地址https://nftimages.s3.us-east-2.amazonaws.com/N8G-7V4.jpg修改为/s3-proxy/N8G-7V4.jpg即可。
调整BestHTTP插件的WebGL配置，关闭不必要的自定义请求头，避免触发不必要的预检请求。
生产环境部署时，要么在S3的CORS配置中添加生产域名的源，要么统一使用后端服务或CDN代理转发S3资源请求。