PIXI.JS：将Origin从API网关切换到NGINX后，Cloudfront + S3的CORS问题

Question

问题摘要

我有一个JS / PIXI应用程序，该应用程序由（1）Origin提供，并通过来自（2）S3的CORS加载图像。最近，我将Origin的设置更改为NGINX，现在收到了我无法解释的CORS问题。

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

新设置

• 来源
  • JS应用程序-> AWS Cloudfront-> NGINX（反向代理）-> Tomcat
  • JS代码将尝试从S3加载图像
  • 示例：https://clawcrane-staging.myshopify.com/（签出您的开发控制台）
• CF + S3（CORS）
  • Cloudfront-> 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）
  • Cloudfront-> 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)

响应头旧设置（无错误）

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 Gateway）中起作用了。