PIXI. JS: проблемы CORS с Cloudfront + S3 после переключения Origin с API Gateway на NGINX - PullRequest
Новая
       17

PIXI. JS: проблемы CORS с Cloudfront + S3 после переключения Origin с API Gateway на NGINX

0 голосов
/ 07 февраля 2020

Краткое описание проблемы

У меня есть приложение JS / PIXI, которое подается из (1) источника и загружает изображения через CORS из (2) S3. Недавно я изменил настройку Origin на NGINX, и теперь у меня возникают проблемы с CORS, которые я не могу объяснить.

Я настроил CF + S3 для CORS, и заголовки corect достигают моего JS приложение. Однако, я все еще получаю ошибки в моей новой установке, но не в моей старой установке. Единственная разница между ними заключается в том, что исходное приложение JS передает NGINX вместо API Gateway, но я не понимаю, почему это должно иметь значение.

Новая настройка

Старая настройка

Детали проблемы

* 1 064 * Когда я проверяю консоль разработчика для новой настройки, заголовки 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 ок. Я получаю сообщение об ошибке: 

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.

1 Ответ

1 голос
/ 07 февраля 2020

Хорошо, ребята, у меня есть решение. Это проблема 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/).

Для предотвращения PIXI JS из-за недопустимых операций над образами CORS, я добавил флаг crossOrigin при их загрузке: 

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

Однако я не понимаю, почему это работает в моей старой установке (с AWS API-шлюз).

...