[Node.js] axios에서 URL 인코딩 바디 적용

1. 문제

1) cors 문제

무선 와이파이 서비스를 제공하는 AP 장비에 클라이언트가 캡티브포탈 브라우저에서 POST 요청을 보내는 상황이었다. 클라이언트의 IP와 AP 서버의 IP가 다르기 때문에 브라우저는 당연히 cors 오류를 내뱉었다.

이 문제를 해결하기 위해 별도의 Node.js 서버를 두고 이 서버에 클라이언트가 POST 요청하면 이 요청을 AP 서버로 전달하도록 설계했다. 즉, 클라이언트와 AP 서버  사이에 Proxy 서버를 두어서-브라우저가 다른 도메인으로 요청을 허용하지 않는-cors 정책을 우회하도록 Proxy 서버가 실제 서버에 요청을 대신 보내는 구조를 만든 것이다.

 

2) axios를 이용한 POST 요청 문제

Proxy 서버를 이용해 cors 문제는 잘 해결했다. 그런데 AP 서버의 REST API 문서대로 요청을 보냈지만 잘 못된 요청이라는 응답을 받게 되었다. 이유는 해당 API가 JSON이 아닌 URL 인코딩 된 데이터를 요구하고 있었기 때문이다.

 

2. axios에 JSON 대신 URL 인코딩 바디 적용

axios에서 URL 인코딩된 데이터를 넘기 위해 "qs 라이브러리"를 이용할 수 있다.

 

1) qs 라이브러리 설치

npm install qs

 

2) qs 라이브러리와 axios를 이용한 URL 인코딩 형식의 POST 요청

const express = require("express");
const app = express();
const axios = require('axios');
const qs = require('qs');

app.post("/auth", async (req, res) => {  
    const { id, pwd, actionurl } = req.body;
    
    // 요청 데이터 예제
    // actionurl = 'https://example.com/endpoint';
    // id = 'user123';
    // pwd = 'password';

    // 데이터를 URL 인코딩 형식으로 변환
    const data = qs.stringify({
      id,
      pwd
    });

    try {
      const response = await axios.post(actionurl, data, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded' // 헤더로 보내야 함
        },
      })

      res.send(response.data);
    } catch (error) {
      res.status(500).send("외부 API 요청 중 오류가 발생했습니다.");
    } 
});

위 "/auth" API를 HTTP 요청하면 아래와 같은 형태로 전송된다.

POST /endpoint HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 25

id=user123&pwd=password

요청 URL은 다음과 같다.

https://example.com/endpoint

 

※ 참조 자료: https://axios-http.com/kr/docs/urlencoded

---

※ 쿼리 파라미터로 보내는 방법

qs 라이브러리를 이용해 쿼리 파라미터(Query Parameter)로 보내는 방법은 다음과 같다.

const axios = require('axios');
const qs = require('qs');

const actionurl = 'https://example.com/endpoint';
const id = 'user123';
const pwd = 'password';

// URL 쿼리 파라미터 생성
const queryString = qs.stringify({ id, pwd });
const fullUrl = `${actionurl}?${queryString}`;

axios.get(fullUrl) // GET 요청 사용
  .then(response => {
    console.log('Success:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

위의 경우 다음과 같은 방식으로 요청하게 된다.

https://example.com/endpoint?id=user123&pwd=password