[알리미 3] 서버 연결

❗ 서버 연결

프런트에서 프런트로 요청이 가는 희귀한 현상..

서버를 연결하는데 서버 포트인 3500으로 요청이 가지 않고, 자꾸 프런트 port 3000에 요청이 가는 것이다.

도대체 무엇이 문제인지 코드를 하나하나 다 살펴보았는데도 정말 집히는 게 없었다.
서버 쪽 allowedOrigins에 3000 포트 추가했고, 앞단의 baseURL에 3500 포트 추가했고,

const allowedOrigins = [
	"http://localhost:3500",
	"http://localhost:3000",
];

module.exports = allowedOrigins;

import axios from "axios";

export default axios.create({
	BASE_URL: "http://localhost:3500",
});

auth api 처리하는 부분에서 user, pwd 인자 받아와서 post 요청 제대로 하였는데 도대체 뭐가 문제지!

const registerFetch = async (user, pwd) => {
  const res = await axios.post(
    REGISTER_URL,
    JSON.stringify({
      user,
      pwd,
    }),
    {
      headers: { "Content-Type": "application/json" },
      withCredentials: true,
    },
  );
  return res.data;
};

결론은 baseURL이 문제였다. 해당 코드를 BASE_URL로 상수처리를 하는 것이 아니라 axios의 규칙에 맞게 baseURL로 처리를 해야 했던 것ㅠㅠㅠ 에러 잡는데 엄청 오래 걸린 건 아니지만, 계속 헤맨 것이 이렇게 사소한 것일 땐 조금 허탈한감이 있다.. 근데 보통 오래 걸리고 모르겠는 것들은 늘 사소한 에러라는 것!

import axios from "axios";

export default axios.create({
	baseURL: "http://localhost:3500",
});

아무튼 mongoDB collection에도 제대로 잘 들어온 것을 확인할 수 있음!
내가 구현한 서버로 프런트와 연결하다니!!! 한 단계 성장한 거 같아서 너무너무 기분이 좋다!