React, NodeJS, Express 및 Heroku. HTTPS 불일치 오류

Question

어떤 이유로 Heroku에 배포 할 때 내 특급 경로를 사용할 수 없습니다. 내가 작동하는 경로를 얻는 유일한 시간은 HTTPS 대신 HTTP를 사용하여 응용 프로그램에 액세스하는 경우입니다. 그러나 Internet Explorer 및 Microsoft Edge에서 HTTPS로 작업 할 수 있지만 Google 크롬 및 Mozilla Firefox에서는 작동하지 않습니다. 이것은 단지 일관성이없는 것처럼 보입니다. 저는 5 시간 동안 이걸로 싸우고 있습니다. React, Express, Node 또는 Heroku가 버그가 있습니다. 다시 .NET에서 코딩을 다시 시작하려는 느낌이 든다.

제공된 모든 도움을 주시면 대단히 감사하겠습니다.

아래는 관련 링크입니다 :

는 Heroku가 배포 아래 참조하십시오 http://youvote-fcc.herokuapp.com https://youvote-fcc.herokuapp.com

로그 아웃 서버 측 경로가 활성 세션을 지우고 사용자를 리디렉션합니다. 그러나 Chrome과 Firefox에서 HTTPS를 사용하면 이러한 일이 발생하지 않고 app.get ('*') 경로가 호출되고 사용자 요청이 React Router에 의해 처리됩니다. 로그를 확인하고 로그 아웃 경로에 실제로 도달했지만 HTTPS를 사용하면 익스프레스 서버의 작업이 클라이언트 측으로 전달되지 않습니다. 경로 순서에 따라 이러한 일이 일어나서는 안됩니다. 게다가 HTTPS에서만 이러한 브라우저를 사용하므로 매우 이상합니다.

Answer 1

문제점을 발견했습니다. React-Create-App을 사용할 때 index.js 파일에있는 Service Worker Registration과 관련이 있습니다. import 문을 변경하여 {unregister} 메소드를 얻은 다음 registerService 메소드를 제거하고 같은 위치에서 등록 해제를 호출했습니다. 이것이 내 색인 파일의 모습입니다.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import { unregister } from './registerServiceWorker'; 
import reduxThunk from 'redux-thunk'; 

import App from './components/App'; 
import reducers from './reducers'; 

const store = createStore(reducers, {}, applyMiddleware(reduxThunk)); 

ReactDOM.render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.getElementById('root') 
); 
//Un-register Service Worker 
unregister(); 

Answer 2

HTTPS를 사용하는 경우 소스가 HTTPS ~에서 제공되는지를 확인해야합니다. 먼저 확인하거나 브라우저 로그 (chrom, firefox)에 로그인하십시오.