Amazon s3 PIXI.JS:Cloudfront的CORS问题&x2B；S3将源站从API网关切换到NGINX后 问题摘要

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

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

新设置

• 起源
  • JS应用程序->AWS Cloudfront->NGINX（反向代理）->Tomcat
  • JS代码将尝试从S3加载图像
  • 示例：（查看您的开发控制台）
• CF+S3（CORS）
  • 云端->S3
  • 例如：

旧体制

• 起源
  • JS应用程序->AWS Cloudfront->AWS API网关
  • 示例：（在这里，您首先需要单击右上角的框并浏览聊天）
• CF+S3（CORS）
  • 云端->S3
  • 例如：

问题详情 当我检查dev控制台的新设置时，CORS头从CF+S3发送到浏览器。尽管如此，我还是在新设置中遇到了CORS错误，但在旧设置中没有错误

新设置的响应标题（错误） 我犯的错误 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)

响应标题旧设置（无错误） S3 CORS设置

*
得到
头
*

Cloudfront CORS设置

---

我已经将访问控制请求头和访问控制请求方法列入了白名单，好了，伙计们，我找到了解决方案。这是一个CORS问题，不是HTTP/浏览器级别的问题，而是JS应用程序（PIXIJS/Webcanvas）级别的问题

请求和响应正确完成，JS应用程序接收图像数据。但是，我了解到，对于从CORS上下文读取的图像，某些操作是不合适的（请参阅）

为了防止PIXIJ对CORS图像进行非法操作，我在加载它们时添加了一个

crossOrigin

标志：

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

---

然而，我不明白的是，为什么在我的旧设置（使用AWS API网关）中会出现这种情况。

错误是什么？JoelWiklund说了什么。另外，响应的HTTP状态代码是什么？您可以使用浏览器devtools中的网络窗格进行检查。是4xx还是5xx错误，而不是200 OK成功响应？添加了错误详细信息。我现在相信，这实际上不是请求/响应本身的CORS问题，而是如何在PIXIJS库中进一步处理CORS图像数据。否则，我会有错误，表明CORS头丢失。

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

<?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>

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