본문 바로가기

Graphics/playcanvas

[playcanvas] cors 문제

 

서버는 스프링,

   this.app = new pc.Application(this.canvas, {
      mouse: new pc.Mouse(this.canvas),
      assetPrefix: true // crossOrigin = "anonymous";
      // this.app.loader._handlers['texture'].crossOrigin = true;
    });

cross origin  문제가 생기면 assetPrefix를 true로 하면 

내부적으로 crossOrigin = "anonymous" 가 되서 mesh들을 가져올수 있다

(특정 핸들러의 cors만 컨트롤 할꺼면 주석처럼 하면됨)

하지만 텍스쳐는 이상하게 에러가 난다. 

텍스쳐는 crossOrigin 이 anonymouse가 아닌  'use-credentials';를 필요로 했다 

this.app.loader._handlers.texture.crossOrigin = 'use-credentials';

이걸 추가했다

그리고 xhr요청때 with credential = true로 할려고 더니 외부에서 설정하는게 없어서

엔진소스에서 withCredentials을 임의로 추가해서 사용하니 작동을 한다 

xhr = new XMLHttpRequest;
xhr.open(method, url, options.async);
options.withCredentials = true; //Add quick fix solution
xhr.withCredentials = options.withCredentials !== undefined ? options.withCredentials : false;

 

근본적인 원인은 playcanvas에서 texturing 할때 <img> 태그를 사용해서 그런것 같다

<img> 태그는 HTML5에서 <img>, <video> 또는 <script>와 같은 CORS를 지원하는 속성이 있습니다.(crossOrigin) 라고 한다 .. 

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes 이거 읽어보면 이해가됨

 

cors 가 뭔지 까먹었으면

https://velog.io/@wlsdud2194/cors

 

CORS에 대한 간단한 고찰

이 포스트에서는 CORS에 대한 이슈에 대해서 다뤄볼려고 합니다. 웹 개발을 하다보면 한번쯤 겪게되는 이슈로 클라이언트와 서버의 오리진이 다를 때 발생하는 이슈입니다. 🤔 CORS? 크로스 도메인? CORS는 Cross Origin Resource Sharing의 약자로 도메인 또는 포트가 다른 서버의 자원을 요청하는 매커니즘을 말합니다. 이...

velog.io