JavaScript加载WebGL纹理遇CORS跨域问题求助

你遇到的CORS错误核心原因是图片所在服务器未返回允许跨域的响应头，虽然代码里已经设置了crossOrigin = "Anonymous"，但这个配置需要服务器配合才能生效。以下是可行的解决办法：

• 将图片迁移到本地同域目录
  这是最直接的方案：把earth8k.jpeg复制到你的前端项目静态资源文件夹（比如项目根目录下的images文件夹），然后修改代码中的图片路径为相对路径：

  earthTexture.image.src = "./images/earth8k.jpeg";
  

  同域资源加载不会触发CORS校验，直接解决问题。

• 配置图片服务器的CORS响应头
  需要在图片所在的服务器上添加Access-Control-Allow-Origin响应头，允许你的前端域名（http://IPaddress:8800）访问：

  • Nginx：在对应location配置块中添加

    add_header Access-Control-Allow-Origin http://IPaddress:8800;
    

  • Apache：在.htaccess文件或服务器配置中添加

    Header set Access-Control-Allow-Origin "http://IPaddress:8800"
    

  • Node.js（Express）：通过中间件或手动设置响应头

    app.get('/images/*', (req, res) => {
      res.header('Access-Control-Allow-Origin', 'http://IPaddress:8800');
      // 处理图片返回逻辑
    });
    

  注意：生产环境不建议设为*（允许所有域名），会带来安全风险。

• 开发环境用代理转发请求
  如果是开发阶段不想动服务器配置，可以用本地代理转发图片请求，避免跨域。比如用Webpack Dev Server的代理配置：

  // webpack.config.js
  module.exports = {
    // ...其他配置
    devServer: {
      proxy: {
        '/images': {
          target: 'http://....', // 图片服务器域名
          changeOrigin: true
        }
      }
    }
  };
  

  然后修改代码中的图片路径为：

  earthTexture.image.src = "/images/earth8k.jpeg";
  

• 排查额外CORS限制

  • 确认图片服务器没有要求携带凭证（credentials），因为你代码中用的是crossOrigin = "Anonymous"，如果服务器设置了Access-Control-Allow-Credentials: true但没指定具体域名，也会导致错误。
  • 检查浏览器控制台是否有预检请求（OPTIONS）失败的提示，若有需确保服务器正确处理OPTIONS请求。

内容的提问来源于stack exchange，提问作者Andrew Viera