[Proxy error] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options.allowedHosts[0] should be a non-empty string.

이 문제를 겪은 사람들이 꽤 있는데요.

어떤 사람은 유선랜에서 와이파이로 바꾸니까 해결됐다고도 합니다.

정확한 이유는 모르겠어요.

예전엔 비교적 간단하게 package.json에 "proxy": "http://localhost:4000" 이런 식으로 넣어주면

프록시가 잘 됐었던 것 같습니다.

 

최상위 디렉토리에 .env 파일을  만들어 DANGEROUSLY_DISABLE_HOST_CHECK=true를 넣거나

개발서버 실행하는 스크립트 앞에 넣어줘도 동작은 합니다만, 

호스트 체크 자체를 안 하겠다고 하는 거라 찝찝합니다.

 

http-proxy-middleware를 이용해봅시다.

출처:https://github.com/facebook/create-react-app/issues/12304

 

src 폴더에 setupProxy.js 파일을 만들고 아래와 같이 작성합니다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = (app) => {
  app.use(
    '/posts',
    createProxyMiddleware({
      target: 'http://localhost:4000',
      changeOrigin: true,
    })
  );
};

이 경우는 호스트가 posts면 json-server인 http://localhost:4000으로 프록시하여 데이터를 가져옵니다.

 

export const getPostById = async (id) => {
  const response = await axios.get(`/posts/${id}`);
  return response.data;
};

 

요청은 localhost:3000으로 했으므로 헤더의 URL은 3000으로 나옵니다.