Unity WebGL에서 로컬 node.js(+ express) 서버의 파일 읽기

unity webGL에서 node.js로 만든 서버에서 파일을 읽어 들여야 하는 일이 있어서 테스트 코드를 작성해봤습니다.

일단 먼저 유니티 코드부터..

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Networking;

public class WebFileOut : MonoBehaviour
{
    public string filePath;
    public string host;
    public string port;

    UnityWebRequest www;

    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        if(Input.GetKeyDown(KeyCode.Space))
        {
            StartCoroutine(GetData());
        }
    }

    private IEnumerator GetData()
    {
        var www = UnityWebRequest.Get("http://" + host + ":" + port + "/" +filePath);
        yield return www.SendWebRequest();

        if (www.isNetworkError || www.isHttpError)
        {
            Debug.LogError(www.error);
        }
        else
        {
            Debug.Log(www.uri.ToString());
            Debug.Log(www.downloadHandler.text);
        }
    }
}

스페이스 바를 누르면, UnityWebRequest.Get을 이용하여 테스트용 txt 파일을 읽어서 로그로 출력해주는 코드입니다.

 

자 여기서 저는 로컬로 서버를 구축할것이기 때문에 host는 "localhost"로 설정하고, port는 적당히 안쓰는 포트를 써줍니다.(저는 8080..) 

 

자 이제 서버와 테스트용 파일을 만듭니다.

 

서버로 사용할 디렉토리에 js파일과 txt파일을 생성합니다.

 

txt파일은 대충 아무 문자열을 넣습니다.

다음 node.js를 이용하여 test.txt 파일을 읽어서 전송하는 서버를 구축한다.

var http = require('http');
var fs = require('fs');
var url = require('url');

var server = http.createServer(function(request,response){
    var _url = request.url;
    var pathname = url.parse(_url,true).pathname;
    if(pathname === '/test.txt')
    {
        fs.readFile(`./test.txt`, 'utf-8', function(err,desc){
            console.log(desc);
            response.end(desc);
        });
    }
});

server.listen(8080);

이렇게 한다음 fileReader.js를 Run 시키고, 유니티 에디터를 실행시켜 스페이스바를 누르면..

 

로그창에 test.txt의 문자열이 출력되는 모습

짜잔! 이렇게 잘 출력됩니다!! 하지만 지금은 에디터 환경에서 잘되는걸 확인한 것입니다. 이제 WebGL로 빌드 후 확인해보겠습니다.

 

언제나 지루한 빌드시간..

 

WebGL로 빌드된 유니티 프로젝트

자 빌드도 다 됐으니 F12를 눌러 콘솔창도 띄워준 뒤, 스페이스바를 누르면 유니티 에디터처럼 로그가 나와야 합니다.

 

하지만 어림없는 우리의 WebGL..

역시 쉽게 되는 일은 거의 없는 WebGL..

일단 진정하고 에러 문구를 천천히 봅시다.

 

Access to XMLHttpRequest at 'http://localhost:8080/test.txt' from origin 'http://localhost:51783' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

음.. 일단 해석을 대충 해보니..  'http://localhost:8080/test.txt'에 있는 CORS라는 정책에 의해 'http://localhost:51783'에서 XMLHttpRequest로의 접근이 블락당했고 'Access-Control-Allow-Origin' 헤더가 필요하다는군요...(무슨 말이지?)  자 그럼 CORS 정책이 뭔지 검색...

 

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

 

자 일단 CORS는 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)의 약자입니다. HTTP 프로토콜에서 추가 헤더를 사용하여, 한 출처(origin)에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 정책입니다. 즉 브라우저에서 다른 웹상의 자료를 접근하려 할 때 지켜야 하는 정책입니다.

 

뭐 일단 CORS란 저런 것이고, 아무튼 이를 해결하기 위한 방법은 꽤 간단합니다. 서버에 cors를 사용하도록 설정을 해주면 됩니다.

단, 제가 사용하던 node.js에 추가로 해야 하는 것이 있더군요.

Express라는 node.js 웹 프레임워크를 우선 설치해줘야 합니다. 설치는 아래 사이트에서 하시면 됩니다.

https://expressjs.com/ko/starter/installing.html

Express 설치

Express가 설치 됐다면 바로 cors도 설치해줍니다.

 

cors 모듈 설치

설치가 끝나면, 다시 서버 쪽인 fileReader.js로 이동합니다. 그 후 아래처럼 수정해 줍니다.

var express = require('express');
var cors = require('cors');
var app = express();
var fs = require('fs');

app.use(cors());

app.get('/test.txt', function(req, res){
    res.sendFile(__dirname + '/test.txt');
})

app.listen(8080, function(){
    console.log("start express server.");
})

수정후 Run 시킨 뒤 다시 빌드해놓은 WebGL로 돌아가 스페이스바를 눌러보면!!

 

스페이스바를 누를때마다 콘솔창에 test.txt의 문자열이 출력된다.

잘된다...(감동..)