프록시 설정해도 작동하지 않습니다.

[신현준]

client, server 동시에 서버를 띄웠습니다. 

server.js 내용은 app.get('/api/search/:id',(요청,응답)=>{~~생략 응답.send(json)} 입니다.

 

이후 client 폴더안에 

create-react-app 으로 만든  client 폴더에 package.json에  "proxy": "http://localhost:5000/" 를 추가하였습니다.

그리고 client/src/Search.js 에서 

   useEffect(()=>{      
        axios.get('api/search/dd')
        .then(function (response) { console.log(response); })
        .catch(function (error) { console.log(error); })
    },[])

를 사용했으나 작동하지 않습니다.

브라우저내에 개발자도구 콘솔창에서 http://localhost:3000/search/api/search/dd 404 (Not Found) 라고 에러가나옵니다.

그래서 클라이언트 에 'http-proxy-middleware'를 설치해주었고

setupProxy.js 새로 만들어주어 안에 내용을 이렇게 작성하였습니다.

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

동일하게 작동하지않습니다.

 

다만

search.js 내에서 프록시를 사용하지않고 직접 url을 전부 기입하면 작동합니다.

 useEffect(()=>{      
        axios.get('http://localhost:5000') //정상작동
        .then(function (response) { console.log(response); })
        .catch(function (error) { console.log(error); })
    },[])

[신현준]

추가로 재시작도 여러번 했으나 안되네요..

[codingapple]

서버만드는 파일에 

const모여있는 곳 하단에 

app.use(express.json());
var cors = require('cors')
app.use(cors());

이것도 추가해봅시다 

[신현준]

말씀하신대로 추가했습니다.

proxy를 설정함으로써 'http://localhost:5000/'  <- 이부분을 생략하고 쓸수있다는데

안되네요... 마치 설정되지 않은것 마냥 현재 경로에 더해져서 값을 요청하네요.. 이게 무슨 문제일까요...

구글링을 아무리 해봐도 해결이되지않습니다 ..

 

 axios.get('api/search/kill') // GET http://localhost:3000/search/api/search/kill 404 (Not Found) 에러
        //axios.get('http://localhost:3000/api/search/aa') // 정상적으로 값을 불러옴
        //axios.get('http://localhost:5000/api/search/aa') // 정상적으로 값을 불러옴

[신현준]

axios.get('api/search/kill') 에 대하여

뭔가 경로가 이상하게 작동해서 값을 못받아오는것 같아서

App.js에서 사용하니 값을 잘 받아옵니다.

다만 저는 Search.js 에서 사용하고싶은데 여기서 쓰면 http://localhost:3000/search 를 기준으로 경로가 더해져버려서

GET http://localhost:3000/search/api/search/kill 404 (Not Found) 에러가 발생 했나봅니다..

localhost:3000/search (클라이언트 Search.js) 에서

localhost:5000/api/search/:id 로 요청하고자합니다. 어떤식으로 해결할수있을까요?

----------------

아래는 App.js 내용입니다.

import Search from './Search';

  <Route path="/search/:id">
        <Search />
      </Route>

[신현준]

search.js 안에 내용을

axios.get('/api/search/kill')에서 axios.get('../api/search/kill')으로 바꾸었더니 내용을 잘 불러옵니다만 왠지 모르게 기분이 찝찝하네요 ㅠㅠ

어떤 경로위치에서 쓰던  axios.get('api/search/kill') 이런식으로쓰면 

내가 등록한 프록시 http://localhost:5000/ 를 기준으로 인식하여 http://localhost:5000/api/search/kill 이렇게 써질줄 알았는데

근데 지금 작동하는코드는 내가 현재 접속한 위치 http://localhost:3000/serarch 에서 동작하네요.. http://localhost:3000/serarch/api/search/kill  이런식으로요... 뭔가 잘못된걸까요? 아니면 정상인걸까요..

[codingapple]

axios.get('/api/search/kill') 

이거는 http://홈페이지주소.com/api/search/kill 여기서 가져오라는 뜻이고 

axios.get('api/search/kill') 

이거는 http://홈페이지주소.com/현재경로/api/search/kill 여기서 가져오라는 뜻이라서

그냥 상대경로 절대경로의 차이가 아닐까요 

 

[신현준]

헐 그렇네요 상대경로 절대경로에대해 무지했었네요 ㅜㅜ 감사합니다!!

[글쓴이]

글