WASM ↔ Server 분기 처리 가이드

WASM demo레벨에서 호출 시

demo.js에서 OCR_SERVER_BASE_URL의 고객사 개발/운영 서버 OCR URL로 변경
Ex) ip:port/scan/id-auto 및 동일 출처(Origin)이 다를 시 CORS에러 발생

wasm-ocr-sample-iframe/demo/demo.js at main · useb-inc/wasm-ocr-sample-iframe

Untitled

CORS 에러 해결 방법

서버에서 Access-Control-Allow-Origin 헤더 세팅

✔️ Node.js 세팅

var http = require('http');

const PORT = process.env.PORT ||{server ocr 설정한 port};

var httpServer = http.createServer(function (request, response) {
    // Setting up Headers
    response.setHeader('Access-Control-Allow-origin', '*'); // 모든 출처(orogin)을 허용
    response.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); // 모든 HTTP 메서드 허용
    response.setHeader('Access-Control-Allow-Credentials', 'true'); // 클라이언트와 서버 간에 쿠키 주고받기 허용

    // ...

    response.writeHead(200, { 'Content-Type': 'text/plain' });
    response.end('ok');
});

httpServer.listen(PORT, () => {
    console.log('Server is running at port 9090...');
});

<aside> ❗ Access-Control-Allow-origin 헤더 값으로 * 을 사용시 모든 Origin에서 오는 요청을 허용하기 때문에, 출처를 직접 명시 필요

</aside>

✔️JSP/Servlet 세팅

import javax.servlet.*;

public class CORSInterceptor implements Filter {

    private static final String[] allowedOrigins = {
            "<http://localhost:3000>", "<http://localhost:5500>", "<http://localhost:5501>",
            "<http://127.0.0.1:3000>", "<http://127.0.0.1:5500>", "<http://127.0.0.1:5501>"
    };
            
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;

        String requestOrigin = request.getHeader("Origin");
        if(isAllowedOrigin(requestOrigin)) {
            // Authorize the origin, all headers, and all methods
            ((HttpServletResponse) servletResponse).addHeader("Access-Control-Allow-Origin", requestOrigin);
            ((HttpServletResponse) servletResponse).addHeader("Access-Control-Allow-Headers", "*");
            ((HttpServletResponse) servletResponse).addHeader("Access-Control-Allow-Methods",
                    "GET, OPTIONS, HEAD, PUT, POST, DELETE");

            HttpServletResponse resp = (HttpServletResponse) servletResponse;

            // CORS handshake (pre-flight request)
            if (request.getMethod().equals("OPTIONS")) {
                resp.setStatus(HttpServletResponse.SC_ACCEPTED);
                return;
            }
        }
        // pass the request along the filter chain
        filterChain.doFilter(request, servletResponse);
    }

    private boolean isAllowedOrigin(String origin){
        for (String allowedOrigin : allowedOrigins) {
            if(origin.equals(allowedOrigin)) return true;
        }
        return false;
    }
}

✔️Spring 세팅

// 스프링 서버 전역적으로 CORS 설정
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
        	.allowedOrigins("<http://localhost:8080>", "<http://localhost:8081>") // 허용할 출처
            .allowedMethods("GET", "POST") // 허용할 HTTP method
            .allowCredentials(true) // 쿠키 인증 요청 허용
            .maxAge(3000) // 원하는 시간만큼 pre-flight 리퀘스트를 캐싱
    }
}

// 특정 컨트롤러에만 CORS 적용하고 싶을때.
@Controller
@CrossOrigin(origins = "*", methods = RequestMethod.GET) 
public class customController {

	// 특정 메소드에만 CORS 적용 가능
    @GetMapping("/url")  
    @CrossOrigin(origins = "*", methods = RequestMethod.GET) 
    @ResponseBody
    public List<Object> findAll(){
        return service.getAll();
    }
}

✔️Nginx

niginx.conf의 loaction / 부분에 add_header 헤더 설정 추가

location / {
    root html;
    add_header 'Access-Control-Allow-Origin' '*';
    index  index.html index.htm;
}

✔️Apache

httpd.conf에서 <IfModule mod_headers.c> 태그 안에 헤더 설정 추가

<IfModule mod_headers.c>
	Header set Access-Control-Allow-Origin "*"
</IfModule>

로컬에서 Chrome 확장 프로그램 이용

브라우저에서 Allow CORS: Access-Control-Allow-Origin 크롬 확장 프로그램 설치

<aside> ❗ 로컬(localhost) 환경에서 테스트 시 CORS 문제 해결 가능

</aside>

Allow CORS: Access-Control-Allow-Origin

WASM SDK레벨에서 호출 시

OCR TYPE을 미리 지정하여 시작하는 경우

sdk 하위 useb-ocr-wasm-sdk.js에서 init()을 미리 받아야 함.

import UseBOCR from './ocr.js';

const ocr = new UseBOCR();
async function init() {
  const params = {
    ocrType: 'idcard-ssa', //주민등록증, 운전면허증만 바로 사용하는 경우
    settings: {
    licenseKey: '{라이센스 키}',
    resourceBaseUrl: 'https://{고객사damain}/sdk/',  //고객사 URL로 변경                        
    ssaRetryType: 'ENSEMBLE', // OCR 요청이 실패한 경우 재시도할 때 사용되는 재시도 유형
    ocrServerBaseUrl: '{고객사 서버 URL}', //Server ocr 호출 {고객사 매핑한 URL}      
    },
    preloading: true, // //preloading 사용 시
    
    //이외 UI_Simulator option 사용 시 아래와 같이 선언 (예시)
    useCompressImage: true // 이미지 압축 사용시
  };

  ocr.init(params.settings);
  await ocr.preloading(); //preloading 사용 시
  await ocr.startOCR(params.ocrType, sendResult, sendResult, onInProgressChange);
}

init();

WASM에서 Server 호출 하는 영역

ocr.js의 __requestServerOCR

하기 샘플코드 기준의 호출 엔드포인트 ocr/{ocr-type}은 useB-server 엔드포인트 매핑 기준으로 설정 된 것입니다.
고객사에 설치되어 있는 저희 OCR 서버의 엔드포인트는 scan/{ocr-type} 으로 변경 필요
하기 샘플코드 기준에서, 서버로 request할 때 image_base64로 되어 있음.
- 현재 설치되어 있는 서버에서 multipartFile로 받고 있는 ****경우 변경 필요.
- base64로 request 가능한 OCR server 는 필요에 따라 배포 가능.

샘플 코드 참조

wasm-ocr-sample-iframe/sdk/ocr.js at main · useb-inc/wasm-ocr-sample-iframe

 __requestServerOCR(ocrType, ssaMode, imgDataUrl) {
    var _this25 = this;
    return new Promise( /*#__PURE__*/function () {
      var _ref12 = _asyncToGenerator(function* (resolve, reject) {
        try {
          var baseUrl = _this25.__options.ocrServerBaseUrl;
          switch (ocrType) {
            case 'idcard':
            case 'driver':
            case 'idcard-ssa':
            case 'driver-ssa':
              baseUrl += '/ocr/idcard-driver'; // scan/idcard-driver
              break;
            case 'passport':
            case 'passport-ssa':
            case 'foreign-passport':
            case 'foreign-passport-ssa':
              baseUrl += '/ocr/passport';
              break;
            case 'alien-back':
              baseUrl += '/ocr/alien-back';
              break;
            case 'alien':
            case 'alien-ssa':
              baseUrl += '/ocr/alien';
              break;
            case 'credit':
              throw new Error('Credit card is not Unsupported Server OCR');
            default:
              throw new Error("Unsupported OCR type: ".concat(ocrType));
          }
          // var apiToken = yield _this25.__requestGetAPIToken();
          // var myHeaders = new Headers();
          // myHeaders.append('Authorization', "Bearer ".concat(apiToken));
          var param = {
            image_base64: imgDataUrl,
            mask_mode: 'true',
            face_mode: 'true'
          };
          if (_this25.__ssaMode) {
            param.ssa_mode = 'true';
          }
          var raw = JSON.stringify(param);
          var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: raw,
            redirect: 'follow'
          };
          fetch(baseUrl, requestOptions).then(res => res.json()).then(result => {
            void 0;
            resolve(result);
          }).catch(e => {
            throw e;
          });
        } catch (err) {
          void 0;
          reject(err);
        }
      });
      return function (_x4, _x5) {
        return _ref12.apply(this, arguments);
      };
    }());
  }