PIXI.JS：将 Origin 从 API Gateway 切换到 NGINX 后 Cloudfront+S3 出现 CORS 问题

Question

问题总结

我有一个 JS/PIXI 应用程序，它从 (1) Origin 提供服务，并通过 CORS 从 (2) S3 加载图像。最近我将 Origin 的设置更改为 NGINX，现在我遇到了无法解释的 CORS 问题。

我已经为 CORS 设置了 CF+S3，并且正确的标头到达了我的 JS 应用程序。但是，我在新设置中仍然遇到错误，但在旧设置中没有。它们之间的唯一区别是原始 JS 应用程序通过 NGINX 而不是 API Gateway，但我不明白为什么这会有所不同。

新设置

• 产地
  • JS 应用程序 -> AWS Cloudfront -> NGINX（反向代理） -> Tomcat
  • JS 代码将尝试从 S3 加载图像
  • 示例：https://clawcrane-staging.myshopify.com/（查看您的开发控制台）
• CF+S3 (CORS)
  • 云端 -> S3
  • 示例：https://s3.app-staging.secretbakery.io/clawgame/clawcrane-staging.myshopify.com/83/cat.png

旧设置

• 产地
  • JS 应用程序 -> AWS Cloudfront -> AWS API 网关 -> Tomcat
  • 示例：https://fabios-colors.com/（此处您首先需要点击右上角的框并进行聊天）
• CF+S3 (CORS)
  • 云端 -> S3
  • 示例：https://s3.app.secretbakery.io/clawgame/fabios-colors.myshopify.com/82/star-cartoon-png-8.png

问题详情

当我检查新设置的开发控制台时，CORS 标头从 CF+S3 发送到浏览器。新设置仍然出现 CORS 错误，但旧设置没有错误。

响应标头新设置（错误）

accept-ranges: bytes
access-control-allow-methods: GET, HEAD
access-control-allow-origin: *
content-length: 2737
content-type: image/png
date: Fri, 07 Feb 2020 06:54:14 GMT
etag: "f17401d09e8e68fdd5e1e4f5f2d6c078"
last-modified: Mon, 03 Feb 2020 06:44:03 GMT
server: AmazonS3
status: 200
vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method
via: 1.1 50f438df6dbb947f3e4702890bc9cc06.cloudfront.net (CloudFront)
x-amz-cf-id: wDaNwtpDRoiFKGaxQ5HgJLPIAiDiCR24O5HNJQ7imwl-BNU9SvyF3g==
x-amz-cf-pop: DUS51-C1
x-cache: RefreshHit from cloudfront

我得到的错误

http 请求返回 200 ok。我得到的错误是：

GLTexture.js:94 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded.
    at n.upload (https://pixijs.download/v4.8.5/pixi.min.js:8:23427)
    at t.updateTexture (https://pixijs.download/v4.8.5/pixi.min.js:13:9592)
    at e.bindTexture (https://pixijs.download/v4.8.5/pixi.min.js:13:17291)
    at e.flush (https://pixijs.download/v4.8.5/pixi.min.js:15:4210)
    at e.stop (https://pixijs.download/v4.8.5/pixi.min.js:15:4619)
    at e.setObjectRenderer (https://pixijs.download/v4.8.5/pixi.min.js:13:15173)
    at e._renderWebGL (https://pixijs.download/v4.8.5/pixi.min.js:11:14045)
    at e.renderWebGL (https://pixijs.download/v4.8.5/pixi.min.js:10:23992)
    at e.renderWebGL (https://pixijs.download/v4.8.5/pixi.min.js:10:24068)
    at e.render (https://pixijs.download/v4.8.5/pixi.min.js:13:14986)

响应标头 OLD 设置（无错误）

accept-ranges: bytes
access-control-allow-methods: GET, HEAD
access-control-allow-origin: *
age: 2365
content-length: 116268
content-type: image/png
date: Fri, 07 Feb 2020 06:58:37 GMT
etag: "71858c64f78ce419cdcd4d8f21839332"
last-modified: Wed, 05 Feb 2020 11:28:15 GMT
server: AmazonS3
status: 200
vary: Access-Control-Request-Headers,Access-Control-Request-Method
via: 1.1 e5dcf90f3787d486ad40e46070021460.cloudfront.net (CloudFront)
x-amz-cf-id: 2LZVSXwwTWkcJ1LShQqfp2ZB4jPMe4Olp7CjOHO6gsGlsUCBxrvlNQ==
x-amz-cf-pop: DUS51-C1
x-cache: Hit from cloudfront

S3 CORS 设置

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Cloudfront CORS 设置

我已将Access-Control-Request-Headers 和Access-Control-Request-Method 列入白名单。

Answer 1

好的，伙计们，我找到了解决方案。这是一个 CORS 问题，不是在 HTTP/浏览器级别，而是在 JS 应用程序级别（PIXIJS/Webcanvas）。

请求和响应正确完成，JS 应用程序接收到图像数据。但是，我了解到某些操作不适用于从 CORS 上下文中读取的图像（请参阅https://webglfundamentals.org/webgl/lessons/webgl-cors-permission.html、https://www.html5gamedevs.com/topic/42303-pixiloader-with-cors/）。

为了防止 PIXIJS 对 CORS 图像进行非法操作，我在加载它们时添加了 crossOrigin 标志：

PIXI.loader.add(url , {crossOrigin: 'anonymous'});

但我不明白为什么这在我的旧设置（使用 AWS API 网关）中有效。