React Redux를 로컬에서 원격으로 사용하여 원격 응용 프로그램의 데이터를 원격으로 사용하고 있으므로 원격 서버에서 호스트 할 때 Express 서버가 올바르게 응답하지 않습니다.

Question

이 기능은 서버에 있고 다른 하나는 클라이언트에 있습니다.

노드 익스프레스 코드 :

app.get('/api/current_user', (req, res) => { 
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); 
     res.send(req.user); 
    }); 

가 돌아 오는 코드 반응은 :

export const fetchUser =() => async dispatch => { 
    const res = await axios.get(`${URI}/api/current_user`); 

    console.log("res data: " +res.data) 

    dispatch({ type: types.FETCH_USER, payload: res.data }); 
}; 

문제는 내가이 {data: "", status: 200, statusText: "OK", headers: {…}, config: {…}, …}으로 console.log("res data: " +res.data)의 출력으로 null을 얻을 수 있다는 것입니다. 하지만 브라우저에서 테스트 할 때 JSON을 https://server243.azurewebsites.net/api/current_user으로 가져옵니다. 내가 보테 서버가 로컬로 실행 example.com의 clien 때, 모든 (서버 및 클라이언트) 지역 mashine에 요청을 로컬 호스트 경우

, 나는 console.log("res data: " +res.data)

Answer 1

이 미들웨어를 추가하려고 같은 도메인하지 않습니다, 문제는 반응 응용 프로그램에 없습니다.

req.user 개체는 일반적으로 PassportJs에 의해 만들어집니다. 그러므로 여권을하려면 먼저 Oauth 제공 업체 (Google)에 전화를 걸어 신청서를 작성해야합니다. 그런 다음 공급자는 사용자 이름과 암호를 사용하여 로그인 할 수있는 화면으로 사용자를 안내합니다.

성공적인 인증이 완료되면 명시 적 응용 프로그램의 등록 된 끝점은 인증 공급자에 의해 호출되고 최종적으로 사용자의 브라우저와 고속 서버간에 유효한 세션이 설정됩니다.

그런 다음 req.user에는 passportJs 직렬화되지 않은 데이터가 포함됩니다.

Answer 2

렸기 때문에 CORS의 출력으로 데이터를 얻을 모든 괜찮습니다 . 원격 서버를 액세서하려고하면 - 그것은을 yor 요청을 차단 서버와 클라이언트 렸기 때문에

그것이 채팅에서 논의 된 바와 같이 사용자의 명시 서버

app.use((req, res, next) => { 
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header('Access-Control-Allow-Methods', 'POST, GET, PUT, PATCH, DELETE, MOVE, OPTIONS'); 
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); 
    next(); 
});